Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
One-way and two-
way data-binding and
event delegation
Save 42% off Aurelia in Action with code
slshunter at manning.com
Starting my-books
Let’s use CLI to generate the project by entering the following
commands into your terminal or command p...
Starting my-books
Your screen should
look something like
this – once it does, run
the program with:
au run --watch
Starting my-books
Executing the au run command hosted the website inside of a
simple HTTP server and rendered a basic Hell...
Starting my-books
This is what our app
looks like so far –
pretty basic.
Starting my-books
Knowing what granularity to break down your application into
can be hard, so let’s take a different appr...
Initial implementation of the
appViewModel – app.js
We’ll start by modifying the app.js file to include all the desired
be...
Initial implementation of the
appViewModel – app.js
After we have this simplistic version running, we can start
breaking i...
Initial implementation of the
appViewModel – app.js
export class App {
constructor(){
this.books = []; ❶
this.bookTitle = ...
Next, let’s modify the src/app.html view to include an input
form and make use of the extra functionality exposed by
ViewM...
Initial implementation of the
appView – app.html
<template>
<h1>Add Book</h1>
<form submit.trigger="addBook()"> ❶
<label f...
Because the app View andViewModel have the same name,
Aurelia automatically binds them together by convention.
As result o...
The value attribute of the input field is configured for two-way
binding with the bookTitle property in the value using th...
The value input on the form that we have added to the view is
bound to the value of the bookTitle ViewModel property using...
Let’s view the first iteration of the add-book form by running the
au run –-watch command and navigating to
http://localho...
Go ahead and type a value into the input box and click the Add
button or press enter.The value of the booklist array updat...
Add-book function added
You should now see the
add-book form rendered
on the page: when you
add a book to the
list, it sho...
Now that you can add books to the list, we need a way to view
them on the page.We’ll do this by rendering the list of book...
<template>
<h1>Add Book</h1>
...
<hr/>
<ul>
<li repeat.for="book of books"> ${book.title} </li> ❶
</ul>
</template>
Modify...
Within the context of the <li> element (including attributes on
the element as well as inside the element itself) we have ...
Rendering a list of books
If you run the au run --watch command at
the terminal/ command line and navigate in the
browser ...
We’ve had a crash course in using a combination of one-way
databinding, two-way data-binding, iterator expressions, and
ev...
Also see:
Thanks for reading!
Save 42% off Aurelia in Action with code
slshunter at manning.com
Upcoming SlideShare
Loading in …5
×

Aurelia in Action: creating great SPAs - quickly and easily

1,788 views

Published on

Aurelia in Action teaches you how to build fantastic single page applications with the Aurelia framework. Aurelia is a web framework that makes it much easier to create single page web applications. Aurelia was written with ES6, so modern JavaScript design principles are baked in from the ground level.

Save 42% off Aurelia in Action with code slshunter at: https://www.manning.com/books/aurelia-in-action

Published in: Software

Aurelia in Action: creating great SPAs - quickly and easily

  1. 1. One-way and two- way data-binding and event delegation Save 42% off Aurelia in Action with code slshunter at manning.com
  2. 2. Starting my-books Let’s use CLI to generate the project by entering the following commands into your terminal or command prompt: au new //Creates new Aurelia project my-books //Name of the Aurelia project <ENTER> //Hit enter to select defaults <ENTER> //Hit enter to create the project <ENTER> //Hit enter to install project dependencies
  3. 3. Starting my-books Your screen should look something like this – once it does, run the program with: au run --watch
  4. 4. Starting my-books Executing the au run command hosted the website inside of a simple HTTP server and rendered a basic HelloWorld page on http://localhost:9000 in the browser. The website is looking basic now though. It’s not much use having a virtual bookshelf that is only capable of greeting users. What users really want to be able to do is manage their books.
  5. 5. Starting my-books This is what our app looks like so far – pretty basic.
  6. 6. Starting my-books Knowing what granularity to break down your application into can be hard, so let’s take a different approach. We’re going to sidestep the dilemma by starting with a high- level application in-lined on one page, then breaking this page down into different components, if they have enough functionality to justify it.
  7. 7. Initial implementation of the appViewModel – app.js We’ll start by modifying the app.js file to include all the desired behavior. First, we’ll create the addBook method.This method adds a new book to the list of books with the name stored in the bookTitle view-model property, clears the current value of bookTitle so that the next value can be added, and logs the list of books to the console so that you can view the results.
  8. 8. Initial implementation of the appViewModel – app.js After we have this simplistic version running, we can start breaking it down into components to make the code cleaner and easier to reason about. Start by creating a new file at src/app.js, and then modify the file as shown in the next slide. TIP My text-editor preference is vscode https://code.visualstudio.com. It has great support for JavaScript, and you can even get plugins for auto- completion of Aurelia classes and HTML snippets.
  9. 9. Initial implementation of the appViewModel – app.js export class App { constructor(){ this.books = []; ❶ this.bookTitle = ""; ❷ } addBook () { ❸ this.books.push({title : this.bookTitle}); ❹ this.bookTitle = ""; ❺ console.log("Book List ", this.books); ❻ } } ❶ Array of books to be bound from appView ❷ Book title to be bound from appView ❸ Method to be called fromView to add a book ❹ Add a new book to the array with the bound title ❺ Reset the title ❻ Log the updated book array
  10. 10. Next, let’s modify the src/app.html view to include an input form and make use of the extra functionality exposed by ViewModel. The next slide shows the source code for the modified version of our app.html file to include a rudimentary implementation of adding and listing books. Initial implementation of the appView – app.html
  11. 11. Initial implementation of the appView – app.html <template> <h1>Add Book</h1> <form submit.trigger="addBook()"> ❶ <label for="book-title"></label> <input value.bind="bookTitle" ❷ id="book-title" type="text" placeholder="book title..."> <input type="submit" value="add" > </form> </template> ❶Trigger the addBook method on form submit ❷ Bind bookTitleViewModel property to the input value
  12. 12. Because the app View andViewModel have the same name, Aurelia automatically binds them together by convention. As result of this, the submit event on the form is delegated to the addBook method on the app ViewModel using the submit.trigger Binding Command. This wires up Aurelia to capture the submit event and call the addBook method whenever the event is fired. Initial implementation of the appView andViewModel
  13. 13. The value attribute of the input field is configured for two-way binding with the bookTitle property in the value using the value.bind syntax. When the value is changed in the book title input field the corresponding value is updated in the view-model, and visa- versa. Initial implementation of the appView andViewModel
  14. 14. The value input on the form that we have added to the view is bound to the value of the bookTitle ViewModel property using the value.bind binding command. This binding is two-way, meaning that changes to the value on the view-model are sent to the view and values typed into the input box in the view are send back to theViewModel. Neat! Initial implementation of the appView andViewModel
  15. 15. Let’s view the first iteration of the add-book form by running the au run –-watch command and navigating to http://localhost:9000 in the browser. Checking my-books progress TIP Running the au run command with the –watch parameter will spin up the simple web server as before and also watch for any file changes, which is useful as you modify the component to add form elements.
  16. 16. Go ahead and type a value into the input box and click the Add button or press enter.The value of the booklist array updates via two-way data binding and is logged to the console. This allows you to verify that your first event delegation trigger and two-way data binding are working as expected. Checking my-books progress
  17. 17. Add-book function added You should now see the add-book form rendered on the page: when you add a book to the list, it should be logged to the console.
  18. 18. Now that you can add books to the list, we need a way to view them on the page.We’ll do this by rendering the list of books to an unordered list on in the app.html view using the repeat.for="item of array" Repeater. Repeaters allow you to loop through the values of an array and inject content for each item into the DOM. Rendering a list of books
  19. 19. <template> <h1>Add Book</h1> ... <hr/> <ul> <li repeat.for="book of books"> ${book.title} </li> ❶ </ul> </template> Modifying the src/app.html view ❶The repeat.for=”book of books” syntax can be used to iterate over each of the items in an array. Now we can see the books that have been added to the list.
  20. 20. Within the context of the <li> element (including attributes on the element as well as inside the element itself) we have access to the book in the current iteration of the loop. We then use the a one-way binding expression ${book.title} to render the Title property of the book in the current iteration to the page. Rendering a list of books Refer the code on the previous slide if you need to.
  21. 21. Rendering a list of books If you run the au run --watch command at the terminal/ command line and navigate in the browser to http://localhost:9000, you should see this image.
  22. 22. We’ve had a crash course in using a combination of one-way databinding, two-way data-binding, iterator expressions, and event delegation to take input from a form, add that input to a list, and render the updated values to the page. This binding system allows you to implement an interaction model where users receive instant feedback based on actions they take on the page, without needing to individually wire up at which points the page needs to be refreshed. Summing up
  23. 23. Also see: Thanks for reading! Save 42% off Aurelia in Action with code slshunter at manning.com

×