我有一个主视图,其中包含带有一些空选择标记的html表单( - >不带元素的下拉列表)。
对于每个选择标记,我在主视图中都有一个子视图。这些子视图负责加载自己的数据
现在我希望我的主视图一次渲染所有内容。如何识别我的子视图的所有ajax调用都已完成?
这是我到目前为止所做的:
BookFormView = Backbone.View.extend({
render: function () {
this.el.html($.tmpl('book-form-template', this.model));
this.authorView = new AuthorView({ el: $('#authors') }); // #authors is a html select element in book-form-template
this.categoryView = new CategoryView({ el: $('#categories') }); // #categories is a html select element in book-form-template
this.authorView.el.val(this.model.autherID);
this.categoryView.el.val(this.model.categoryID);
return this;
}
});
您可以看到我的BookFormView的渲染方法。我想通过相应的model-id预先选择正确的选项。但这不起作用,因为在我的子视图中调用了ajax。
我的子视图:
AuthorView = Backbone.View.extend({
initialize: function (options) {
this.render = _.bind(this.render, this);
this.collection = new Authors(); // Authors is a backbone.js collection
this.collection.bind('refresh', this.render);
this.collection.fetch();
},
render: function () {
this.el.html($.tmpl('selectoption-template', this.collection));
}
});
CategoryView = Backbone.View.extend({
initialize: function (options) {
this.render = _.bind(this.render, this);
this.collection = new Categories(); // Categories is a backbone.js collection
this.collection.bind('refresh', this.render);
this.collection.fetch();
},
render: function () {
this.el.html($.tmpl('selectoption-template', this.collection));
}
});
最后是控制器:
BookController = Backbone.Controller.extend({
routes: {
'books': 'list',
'books/:id/edit': 'showEditForm'
},
showEditForm: function (id) {
var book = new Book({ id: id }); // Book is a backbone.js model
book.fetch({
success: function (bookData, resp) {
var view = new BookFormView({ model: bookData });
view.render();
}
});
}
//...
});
我知道我可以在我的控制器中预加载类别和作者但这不能解决我的问题,因为它们的回调仍然是异步的。
另一种解决方案是创建我的图书模型的作者和类别属性,并在没有自定义视图的情况下直接渲染它们。但我更喜欢将它们分开,以便在我的应用中的不同位置重复使用它们。
有什么方法可以解决这个问题吗?
答案 0 :(得分:1)
我想通了,这根本不是关于backbone.js的。它只是在javascript中处理函数。我在stackoverflow上找到了一个great answer,对我来说很好。