简单的主干 js 视图不起作用答案

【问题标题】：simple backbone js view not working简单的主干 js 视图不起作用
【发布时间】：2015-04-08 11:31:02
【问题描述】：

我只是复制粘贴了我以前的代码，但我的代码仍然无法正常工作。我是新手，我所做的就是从示例中复制和粘贴。而且还是不行。

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

【问题讨论】：

而不是做一个愚蠢的复制/粘贴，你可以做一些努力来理解backbone.js的概念。请使用网络上的教程。

标签： backbone.js view model

【解决方案1】：

您没有集合change或resetevent 的绑定。此外，您的渲染方法不会做任何事情来将内容实际渲染到 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();

【讨论】：

【解决方案2】：

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

date.fetch();

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

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

date.fetch({reset:true}),

这将在集合从服务器获得响应后触发“重置”事件。在 view.js 中

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

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

以承诺的方式呈现。如果您不熟悉此检查，请点击此处 promise

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

此外，在视图中而不是在 model.js 中进行 fetch 始终是一个好习惯。例如：

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
    }
});

【讨论】：

此外，在视图内部而不是在 model.js 中进行 fetch 始终是一个好习惯。谢谢你的这句话。将以这种方式工作。