2013-03-21 3 views
4

У меня возникли проблемы с пониманием того, как визуализировать коллекцию в представлении с помощью шаблона. Вот мой код:Рендеринг коллекции в backbone.js

<div id="mydiv"></div> 

<script type="text/template" id="details"> 
<ul> 
<% _.each(?, function(person) { %> 
<li><%= person.name %></li> 
<% }); %> 
</ul> 
</script> 

<script> 
var m = Backbone.Model.extend(); 

var c = Backbone.Collection.extend({ 
     url: 'retrieve.php', 
     model: m 
}); 

var v = Backbone.View.extend({ 
     el : $('#mydiv'), 
     template : _.template($("#details").html()), 
     initialize : function() { 
     var coll = new c(); 
     coll.fetch({success: function(){alert(JSON.stringify(coll));} });    
     this.render(); 
     }, 
     render : function() { 
     //what do I put here? 
     return this; 
     } 
}); 

var view = new v(); 

Я смущен о том, как получить данные, возвращенные из моего php-файла в шаблон. Какой код мне нужен в представлении и ._each? Мой php-код возвращается:

[{"id":"1","name":"John","age":"5"},{"id":"2","name":"Jane","age":"2"}] 

и я вижу это в предупреждении().

ответ

9

Вы должны вызвать вашу render функцию от success обработчика, как через collection.fetch возвращает результат асинхронно (вы также можете bindrender функция в случае сбора reset).

var v = Backbone.View.extend({ 
    el : '#mydiv', 
    template : _.template($("#details").html()), 
    initialize : function() { 
     var self = this, 
      coll = new c(); 
     coll.fetch({ success: function(){ self.render() ; } });    
    }, 
    render : function() { 
     // the persons will be "visible" in your template 
     this.$el.html(this.template({ persons: this.coll.toJSON() })); 
     return this; 
    } 
}); 

И в шаблоне относятся к одной и той же persons объекта

<script type="text/template" id="details"> 
    <ul> 
    <% _.each(persons, function(person) { %> 
     <li><%= person.name %></li> 
    <% }); %> 
    </ul> 
</script> 

Update:

Я создал рабочую fiddle, но мне пришлось изменить исходный код, Я не могу использовать конечную точку retrieve.php

+0

Хмм! Я следую логике, но по какой-то причине я не могу заставить ее работать. Я ничего не вижу, когда запускаю код. Есть идеи? – user1884367

+0

Я добавил [скрипка] (http://jsfiddle.net/superhacker/P2JR8/3) к моему ответу – user20140268

+0

Отлично. Спасибо за вашу помощь – user1884367

1

Что вы задали, является общим вопросом о том, как использовать коллекцию для создания представления. Большинство из них удобны в создании представления с помощью модели, но не с коллекцией. Я выполнил следующий учебник Binding a collection to a view. Может быть полезно и вам.