简单的主干 js 视图不起作用
Posted
技术标签:
【中文标题】简单的主干 js 视图不起作用【英文标题】：simple backbone js view not working 【发布时间】：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的概念。请使用网络上的教程。 【参考方案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 始终是一个好习惯。谢谢你的这句话。将以这种方式工作。以上是关于简单的主干 js 视图不起作用的主要内容，如果未能解决你的问题，请参考以下文章