使用 Backbone.js 和 Tastypie 从服务器预加载集合一无所知答案

【问题标题】：Clueless on preloading collection from server using Backbone.js and Tastypie使用 Backbone.js 和 Tastypie 从服务器预加载集合一无所知
【发布时间】：2011-09-07 15:22:43
【问题描述】：

我正在尝试使用backbone.js 显示项目列表。基本上，骨干网应该能够将项目 .fetch() 放入 Projects 集合中。从充满项目的异步请求中我可以看出这是可行的。

但是，如何在页面加载时呈现它们？没有太多关于将 reset() 方法用于“引导模型”的文档。任何帮助表示赞赏！谢谢。

app.js：

var oldSync = Backbone.sync;

Backbone.sync = function(method, model, success, error){
    var newSuccess = function(resp, status, xhr){
        if(xhr.statusText === "CREATED"){
            var location = xhr.getResponseHeader('Location');
            return $.ajax({
                       url: location,
                       success: success
                   });
        }
        return success(resp);
    };
    return oldSync(method, model, newSuccess, error);
};

(function($) {
    window.Project = Backbone.Model.extend({});

    window.Projects = Backbone.Collection.extend({
        model: Project,
        url: PROJECT_ENDPOINT,
        parse: function(data) {
            return data.objects;
        }
    });    

    window.ProjectView = Backbone.View.extend({
       tagName: 'li' ,
       className: 'project',



       initialize: function() {
           _.bindAll(this, 'render');
           this.model.bind('change', this.render);

           this.projects = new Projects();
           this.projects.fetch(function(data) {
               console.log("haha");
           });

           this.template = _.template($('#project-template').html());
       },
       render: function() {
           var renderedContent = this.template(this.model.toJSON());
           $(this.el).html(renderedContent);
           return this;
       }
    });

})(jQuery);

模板：

.........
    <script>
        PROJECT_ENDPOINT = "{% url api_dispatch_list resource_name="project" %}";        
    </script>


    <script type="text/template" charset="utf-8" id="project-template">
        <span class="project-title"><%= title %></span>
    </script>

  </head>

  <body>
      <div id="container"></div>
  </body>
</html>

【问题讨论】：

标签： backbone.js

【解决方案1】：

您可以将自举模型添加到模板中：

<script>
    PROJECT_ENDPOINT = "{% url api_dispatch_list resource_name="project" %}";
    INITIAL_DATA = <%= collection.to_json %>
</script>

然后在您的视图构造函数中将this.projects.fetch(...) 替换为this.projects.reset(INITIAL_DATA)

【讨论】：

【解决方案2】：

我喜欢将我的应用设置为具有某种“启动”功能，我使用预加载项目的 json 数据调用该功能。

function MyApp(){
  this.start = function(initialModels){
    var myModels = new MyCollection(initialModels);
    var modelsView = new MyModelsView({collection: myModels});
    modelsView.render();
    // ... other startup code here
  }
}

并且 html 页面有一个脚本博客，看起来像这样：

<script language="javascript">
  var myApp = new MyApp();
  myApp.start(<%= mymodel.to_json %>)
</script>

希望对你有帮助

【讨论】：