4

テンプレートを使用してビューでコレクションをレンダリングする方法を理解するのに問題があります。これが私のコードです：

<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"}]

これは alert() で確認できます。

4

2 に答える 2

9

ハンドラーから非同期的に結果を返すようにrender関数を呼び出す必要があります(関数をコレクションイベントにバインドすることもできます)。successcollection.fetch renderreset

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>

アップデート：

動作するフィドルを作成しましたが、retrieve.phpエンドポイントを使用できないため、元のソース コードを変更する必要がありました

于 2013-03-21T19:05:11.017 に答える
1

あなたが尋ねたのは、コレクションを使用してビューを生成する方法の一般的な質問です。それらのほとんどは、モデルを使用してビューを生成することに慣れていますが、コレクションを使用することはできません。次のチュートリアルに従って、コレクションをビューにバインドします。あなたにも役立つかもしれません。

于 2013-03-21T18:50:23.447 に答える