我想知道如何告诉骨干等待我的集合获取模型然后渲染下划线位。
在控制台中,从下划线模板返回错误字段的错误。当我在console.log(this.collection.toJSON())时,它不显示任何数据。所以我假设,视图在获取数据之前呈现。如何告诉视图等到它被提取?
///////查看////////
define([
'jquery',
'underscore',
'backbone',
'collections/mitarbeiter',
'text!/aquilamus/templates/mitarbeiter/mitarbeiter.html'
], function($, _, Backbone, MitarbeiterCollection, MitarbeiterTemplate){
var MitarbeiterListView = Backbone.View.extend({
el: $("#container"),
initialize: function(){
this.collection = new MitarbeiterCollection;
this.collection.fetch();
var newtemplate = MitarbeiterTemplate;
this.template = _.template($(newtemplate).html());
},
render: function(){
var renderedContent = this.template(this.collection.toJSON());
$(this.el).html(renderedContent);
return this;
}
});
// Our module now returns our view
return MitarbeiterListView;
});
答案 0 :(得分:11)
像其他人一样使用reset
建议作品,但这里有另一种选择。
define([
'jquery',
'underscore',
'backbone',
'collections/mitarbeiter',
'text!/aquilamus/templates/mitarbeiter/mitarbeiter.html'
], function($, _, Backbone, MitarbeiterCollection, MitarbeiterTemplate){
var MitarbeiterListView = Backbone.View.extend({
el: $("#container"),
initialize: function(){
this.collection = new MitarbeiterCollection;
var newtemplate = MitarbeiterTemplate;
this.template = _.template($(newtemplate).html());
},
render: function(){
var self = this;
// show some loading message
this.$el.html('Loading');
// fetch, when that is done, replace 'Loading' with content
this.collection.fetch().done(function(){
var renderedContent = self.template(self.collection.toJSON());
self.$el.html(renderedContent);
});
return this;
}
});
// Our module now returns our view
return MitarbeiterListView;
});
另一个替代方法是做一些非常类似的事情,除了使用the success
callback function,你可以把它放在提取选项中。
答案 1 :(得分:2)
这对我来说是最好的:
var ArtistListView = Backbone.View.extend({
el: '.left',
initialize:function(){
this.render();
},
render: function () {
var source = $('#my-list-template').html();
var template = Handlebars.compile(source);
var collection = new MyCollection;
collection.fetch({async:false});
var html = template(collection.toJSON());
$(this.el).html(html);
});
答案 2 :(得分:1)
我不知道有什么方法可以说它等待,但我知道你可以告诉骨干来(重新)渲染你的集合。
initialize: function(){
this.collection = new MitarbeiterCollection;
this.collection.fetch();
var newtemplate = MitarbeiterTemplate;
this.template = _.template($(newtemplate).html());
this.collection.on('reset', this.render, this);
},
最后一行会收听您的收藏集reset
事件。触发后,它将调用render
方法。
答案 3 :(得分:1)
当fetch完成时,Collection fetch触发事件'reset'。您可以利用fetch事件
this.collection.on('reset', this.render);
答案 4 :(得分:1)
fetch
还允许您传递success
处理函数,该函数将在获取成功时调用,即:
this.collection.fetch({success: this.render});