backbone Inverse view
backbone-views, backbone.js, javascript
Solution
I ended up just adding the json of every model I needed on the element of each view.
In other words:
<ul class="people" data-collection="people">
<li data-model="person" data-attributes='{"name":"Peter"}'>Peter</li>
<li data-model="person" data-attributes='{"name":"John"}'>John</li>
</ul>
The JSON pieces on each attribute are trivial to generate on the server in my case.
The reason I prefer including json embedded inside the html instead of returning it in a big array at the beginning is that this way I can attach the models to their views quite easily.
The rest streams from there.
I use jquery to detect the `data-collections` and create the corresponding views, associated to the DOM element. Then I parse the models, and finally I start listening to the events on the collection view.
$(function(){
$('[data-collection="people"]').each(function() {
var view = new PeopleView({el: this});
view.parse();
view.listen();
});
});
The `parse` and `listen` methods looks like this:
MyApp.PeopleView = Backbone.View.extend({
collection: MyApp.Collections.People,
...
parse: function() {
var people = this.$("[data-model='person']").map(function(i,el){
return new MyApp.Models.Person($(el).data('attributes'));
};
this.collection.reset(comments, {silent: true});
},
listen: function() {
this.listenTo(this.collection, 'add', this.showNewPerson, this);
this.listenTo(this.collection, 'reset', this.renderEveryone, this);
this.delegateEvents();
}
...
});
On this particular case I didn't need to create specific Backbone views for each person in the list. But I could have done so in the `parse` method if I needed to do so.
Problem
backbone newbie here. I'd like to start using backbone on an web app (backend is Ruby on Rails), which until now had very little client functionality (some jquery for doing slideToggles, and a couple ajax calls). One of the problems I'm facing is that Backbone seems to be built so that you load your javascript, then make it request data (usually JSON) to the server, and then it renders the view. This is not acceptable in my case. I'd like to take the html originated on the server, present it to the user, and then populate my models with that html (after that, I'm fine with the models requesting JSON stuff from the server). I'm guessing that what I need is some sort of "Inverse View". Something that given this html: ``` <ul class="people"> <li><span class="name">Peter</span></li> <li><span class="name">John</span></li> </ul> ``` And a People Collection and a Person model with a name attribute, can parse Peter and John out of that (maybe using the View). Is this something that exists? Am I approaching the whole thing the wrong way?