无法使用Backbone.js和tastypi从服务器预加载集合_Backbone.js

无法使用Backbone.js和tastypi从服务器预加载集合

backbone.js

无法使用Backbone.js和tastypi从服务器预加载集合,backbone.js,Backbone.js,我正在尝试使用backbone.js显示项目列表。基本上，主干应该能够.fetch（）将项目放入项目集合。这是可行的，我可以从充满项目的异步请求中看出这一点但是，如何在页面加载时呈现它们？对于“引导模型”使用reset（）方法的文档并不多。感谢您的帮助！谢谢 app.js： var oldSync = Backbone.sync; Backbone.sync = function(method, model, success, error){ var newSuccess = f

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

但是，如何在页面加载时呈现它们？对于“引导模型”使用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>

。。。。。。。。。
PROJECT_ENDPOINT=“{%url api_dispatch_list resource_name=“PROJECT”%}”；

我喜欢将我的应用程序设置为具有某种“启动”功能，我使用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>


var myApp=新的myApp（）；
myApp.start（）

希望有帮助

您可以将引导模型添加到模板中：

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


PROJECT_ENDPOINT=“{%url api_dispatch_list resource_name=“PROJECT”%}”；
初始数据=

然后在视图中，构造函数将

this.projects.fetch（…）

替换为

this.projects.reset（初始数据）