Recipes with Backbone. An Intro to Backbone.js: Part 3 – Binding a Collection to a View - Liquid Media. This is Part 3 of a series of tutorials.
Here’s Part 1 and Part 2. So we’ve covered models, collections, controllers, and the basic case of tying a view to a model’s callbacks. Now we’re going to cover tying a view to a collection. This gets a little hairy, so I’m going to keep it nice and simple to start. Note: As with most things, there are large number of ways you could do this. A Basic Collection View Let’s say that we have an existing page that looks like this: I’m going to define a DonutCollectionView that will, when given a collection of donuts, render an UpdatingDonutView for each donut. This is a pattern I use fairly often. Initialize I didn’t go into much detail about this before. *You could, but you’d better have a good reason.
Creating and Rendering So let’s say I create a Backbone.Collection of donuts. I can then create a View with those Donuts. This will render each of the donuts into the View and append them to the ul that I created earlier. And here’s the implementation of that… Backbone.js | Framework. Backbone patterns. This is a document with best practices in Backbone.
This is a massive work-in-progress. This document assumes that you already have some knowledge of Backbone.js, jQuery, and of course, JavaScript itself. Inline templates The problem: if you need to use view templates in a small Backbone application, defining your templates in JavaScript code will be unwieldy and difficult to maintain. Solution: You may need some view templates to be inline in the HTML page. This solution has been outlined by John Resig in his blog post about JavaScript micro templating. Defining inline templates You can put templates in an HTML <script> tag.
Change the type attribute to something else so it will not be interpreted as JavaScript.Set an id so we can easily refer to it. Using inline templates $("#template-contact").html();//=> "<div class='contact'>\n<strong><%= name %></str... " template = _.template($("#template-contact").html());//=> function() { ... } Integrating into Backbone Limitations Single-page apps only. Rstacruz/backbone-patterns - GitHub. Backbone.js by example – Part 1 - Chaker Nakhli's Blog.
Backbone.js is a Javascript MVC (model-view-controller) library that provides complete support for building clean and easy to maintain client side code. What I like in Backbone.js is its light weight (~4.5kb) and that it doesn’t get in my way by imposing how my application should be architected or organised. Backbone.js is not even restricted to single page interfaces or to Javascript heavy applications. It lays a good foundation that helps writing well structured, easy to maintain and easy to extend client side code. I started learning Backbone.js a few weeks ago and I fell in love with it. In this post we will build a concrete application step by step: a simple graphical editor (for the impatient, here is what we are going to build in about 100 lines of javascript). If you want to test and hack the code snippets presented here you’ll need to create three files: editor.js, editor.css and editor.html.
I’m using cdnjs here, an alternative free CDN for Javascript brought by cloudflare . Thomasdavis/backbonetutorials - GitHub.