Backbone.js理解：取模并显示模板

我已经阅读了很多教程并在.net上搜索......但仍然遇到Backbone.js的麻烦。这是我的简单场景：Backbone.js理解：取模并显示模板

Rails应用程序响应具有JSON对象集合的GET请求。当DOM准备就绪时，我想动态地建立一个包含Backbone集合的表行列表。这是代码混淆我：

HTML部分：

<script type="text/template" id="tmplt-Page"> 
     <td>{{=title}}</td> 
     <td>{{=description}}</td> 
    </script>

骨干的脚本：

$(function(){ 
    var Page = Backbone.Model.extend({}); 

    var Pages = Backbone.Collection.extend({ 
     model: Page, 
     url: '/pages' 
    }); 
    var pages = new Pages([ 
     {title: 'ProvA1', description: ''}, 
     {title: 'ProvA2', description: ''} 
    ]); 

    var PageView = Backbone.View.extend({ 
     tagName: 'tr', 
     template: _.template($('#tmplt-Page').html()), 

     render: function() { 
      this.$el.append(this.template(this.model.toJSON())); 
      return this; 
     } 

    }); 

    var AppView = Backbone.View.extend({ 
     el: $("#results"), 

     initialize: function() { 
      _.bindAll(this, 'render'); 
      pages.on('reset', this.render) 
     }, 

     render: function() { 
      this.$el.empty(); 
      pages.each(function(page) { 

       var view = new PageView({ 
        model : page 
       }); 

       this.$el.append(view.render().el); 

      }); 

      return this; 
     } 

    }); 

    var appview = new AppView; 

});

没有呈现在屏幕上。

似乎有为2个问题：

1）取（）是异步的，因此该代码的AJAX往返结束之前执行。

2）如果我手动加载某些对象到集合，这一段代码 “this.template（this.model.toJSON（））” 不能代替JSON属性

编辑：

要用胡子标签我写此代码之前所有：

enter image description here

来源

2012-11-04 Mich Dart

首先，正如你所说，fetch()是异步的，但它会触发“复位”事件当它完成，所以你应该添加此：

pages.on('reset', this.render)

其次，你从来没有在任何地方插入网页浏览的HTML。在AppView.render补充一点：

// at the beginning var self = this; // and in the forEach loop self.$el.append(view.el);

第三，在AppView.render开始时，你应该清楚的this.$el内容。

编辑：

你仍然有几个问题：

您正在使用下划线与胡子标签模板（{{ }} - ><%= %>）
缺少变种self = this在渲染
你是不要拨打appview.render()！ :)

这里是你的代码上的jsfiddle工作：http://jsfiddle.net/PkuqS/

来源

2012-11-04 17:43:59

我进行了更改，请上述检查出的代码。但是，仍然没有...谢谢 –

现在一切正常！谢谢。只有几个问题：我应该在什么时候使用backbone.js？我的意思是...当用户可以更新DOM时非常有用......但是如果我必须在页面加载时预加载/填充集合，这是个好主意吗？当这个美好的图书馆变得有用？ –

Backbone.js理解：取模并显示模板

回答

相关问题