How to implement two-way HTML binding in backbone.js?

Question

I have spent a lot of time researching JS frameworks and I feel like backbone.js is the best for what I need. The only problem is that is seriously lacks any templating. It says that it is open to it through third party add-ons but I'm having trouble getting started. I would like the data in the models to be able to subscribed to.

Here is my model and collection:

window.colorItem = Backbone.Model.extend({
});

window.colorLibrary = Backbone.Collection.extend({
    model: colorItem
});

var colors = new colorLibrary(
    [
        {"unique_id":"1000","user_id":"1","color":"#66bf1c","note":"Enter a note!"},
        {"unique_id":"1001","user_id":"1","color":"#332c5d","note":"Enter a note!"}
    ]
);

How could I simply attach this model to the DOM with backbone.js?

Answer 1

You should create a main view that will display the model information the way you want. You are going to need to pass the collection you want to display or instantiante it inside the view. After that you have to grab each model from the collection to display them on the page. You can do that using jquery and appending it to the object you need or, and this is what I recommend, you create a new view for each model. That way you can controll each model individually using events.