Next, some CSS to make the todo list look pretty.ĭelete icon courtesy of The Noun Project:īackground: url(./assets/app/remove.png) no-repeat This is generally a more maintainable way of embedding templates than storing them in JavaScript strings, but there's no requirement that you use this technique.

We can then retrieve the contents of the element to get a convenient template string. We'll also add some invisible HTML templates to the page, which will be used to render our views later.īy putting this template HTML inside a element with type='text/x-template', we ensure that the browser will ignore it because it doesn't recognize the text/x-template type. I swear.įor a slightly more realistic use case demonstrating how the App Framework can make a complex task simpler instead of a simple task more complex, take a look at the GitHub Contributors example.įirst we'll create the HTML shell for our todo app. Also, our lawyers advised us that we were legally required to provide a todo example, so we had no choice in the matter. In other words, this example is not meant to be a recommendation for how to implement a todo app it's meant to be a demonstration of how models and views fit together to define application logic. In reality, this little todo app is so conceptually simple that it probably doesn't need to be broken into discrete components, but its inherent conceptual simplicity makes it convenient for explaining how models, model lists, and views work. Ironically, this example complexifies a very simple application in order to demonstrate concepts you might actually use to simplify a complex application.

Todolist app