Last active
October 24, 2016 19:13
-
-
Save pjschreifels/5895777a281e6d059551ceda9bd65a32 to your computer and use it in GitHub Desktop.
Aurelia update form values from custom component.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <require from='./records'></require> | |
| <require from='./record-form'></require> | |
| <div class="container-fluid"> | |
| <div class="row mt-1"> | |
| <div class="col-xs-12"> | |
| <p class="lead text-muted">${heading}</p> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <record-form></record-form> | |
| </div> | |
| <div class="col-sm-8"> | |
| <records></records> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-xs-12"> | |
| <hr /> | |
| <!-- <pre> | |
| Selected row: | |
| ID: ${id} | |
| Title ${title} | |
| Date: ${date} | |
| </pre> --> | |
| </div> | |
| </div> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class App { | |
| heading = "Aurelia App" | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha256-mIfhv/h3MLq3WSiSlduuZO3saRNzzuf1LK8w3z3l3JY=" crossorigin="anonymous" /> | |
| <style> | |
| .table-hover { | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body aurelia-app="main"> | |
| <div class="container"> | |
| <div class="row mt-1"> | |
| <div class="col-xs-12"> | |
| <p class="lead text-muted">Loading...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script> | |
| <script> | |
| require(['aurelia-bootstrapper']); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-validation'); | |
| aurelia.start().then(() => aurelia.setRoot()); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <form> | |
| <input type="hidden" id="id" value.bind="id"> | |
| <div class="form-group"> | |
| <label for="title">Title</label> | |
| <input type="text" class="form-control" id="title" value.bind="session.record.title" placeholder="Title"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="date">Date</label> | |
| <input type="text" class="form-control" id="date" value.bind="session.record.date" placeholder="Date"> | |
| </div> | |
| <button type="submit" class="btn btn-outline-primary">Update</button> | |
| </form> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {bindable} from 'aurelia-framework'; | |
| import {Session} from './session'; | |
| export class RecordForm { | |
| static inject = [Session]; | |
| constructor(session) {this.session = session;} | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <table class="table table-hover"> | |
| <thead> | |
| <tr> | |
| <th>#</th> | |
| <th>Title</th> | |
| <th>Date</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr repeat.for="row of data" click.trigger="editItem(row)"> | |
| <th scope="row">${row.id}</th> | |
| <td>${row.title}</td> | |
| <td>${row.date}</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p class="lead small text-muted">Click a row to edit its details.</p> | |
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Session} from './session'; | |
| export class Records { | |
| static inject = [Session]; | |
| constructor(session) {this.session = session} | |
| data = [ | |
| {id: 1, title: 'First record', date: '10/1/2016'}, | |
| {id: 2, title: 'Second record', date: '10/2/2016'}, | |
| {id: 3, title: 'Third record', date: '10/3/2016'}, | |
| {id: 4, title: 'Fourth record', date: '10/4/2016'} | |
| ]; | |
| editItem(item) { | |
| this.session.record = item; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class Session { | |
| record = { | |
| title: 'Default', | |
| date: 'Default' | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment