Question

我只是复制粘贴了我之前的代码，但我的代码仍无效。我是新手，我所做的就是复制和粘贴示例。而且它还没有用。

的index.html

<body>

<div id="date">Loading...</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>


<script type="text/javascript" src="model.js"></script>
<script type="text/javascript" src="views.js"></script>
</body>

model.js

   var model = Backbone.Model.extend({});
collection = Backbone.Collection.extend({
        url:'date.json',
        model:model,
        parse:function(response){    
        return response;
        }
});
date = new collection();
date.fetch();

view.js

  var DateView = Backbone.View.extend({
    el: $('#date'),
    initialize: function(){
    _.bindAll(this, 'render');
    },
    render: function(eventName) {
    console.log(this.collection.length); //Throwing 0 as output
    }
});
var dateview = new DateView({collection:date});
dateview.render();

date.json

[
{"date":"1288323623006"}
]

Answer 1

您没有对集合change或reset事件的绑定。此外，您的渲染方法无法将内容实际呈现为html。

date.fetch命令（没有任何错误处理！）是异步执行的，因此很可能在视图渲染已经执行时返回。因此，您需要对集合的事件进行适当的绑定，如下所示：

<强> view.js

  var DateView = Backbone.View.extend({
    el: $('#date'),
    initialize: function(){
      _.bindAll(this, 'render');
      this.collection.on("change", this.render);
      this.collection.on("reset", this.render);
    },
    render: function(eventName) {
      console.log(this.collection.length); //Throwing 0 as output
      return(this); // used for chaining
    }
});
var dateview = new DateView({collection:date});
dateview.render();

Answer 2

在您的流程中，您已将model.js包含在其中进行提取

date.fetch();

这是一个异步方法，这意味着它将获取数据，javascript继续运行下一行代码。

然后在你的视图中执行this.collection.length（实质上是日期对象）时，可能尚未从服务器检索此集合，这意味着它仍然是空的。获取后呈现内容的正确方法是 1.将渲染绑定到fetch，就像Exinteris提到的那样

date.fetch({reset:true}),

这将触发＆＃34;重置＆＃34;集合收到服务器响应后的事件。在view.js

this.collection.on("reset",this.render);

意味着它将在触发重置事件后呈现。

以承诺方式呈现。如果您是这里的新手，请点击此处 promise

var self=this;
date.fetch().then(function(){
   self.render();
});

此外，在视图内部进行提取始终是一种好习惯，而不是在model.js中。例如：

var DateCollection=Backbone.Collection.extend(...);
var DateView = Backbone.View.extend({
    el: $('#date'),
    initialize: function(){
        _.bindAll(this, 'render');
        this.collection=new DateCollection();
        this.collection.on('reset',this.render());
        this.collection.fetch({reset:true});
    },
    render: function(eventName) {
        console.log(this.collection.length); //Throwing 0 as output
    }
});

简单的骨干js视图不起作用

2 个答案: