我想知道是否可以使用BackboneJS从子视图调用视图函数。 如果是的话,它是如何工作的?
我想从子视图中调用属于mainView的函数“hello”。
也许如果事件触发......
示例:
var MainView = Backbone.View.extend({
initialize: function() {
this.$template = $(template);
this.subview = new SubView();
this.render();
},
render: function() {
this.$el.html(this.$template);
var element = this.$template.attr('id');
this.subview.setElement('#'+element).render();
},
hello: function() {
alert('Hello');
}
});
var SubView = Backbone.View.extend({
initialize: function() {
this.$template = $(template);
this.render();
},
render: function() {
this.$el.html(this.$template);
//Call view function ' hello '
//parentView.hello();
}
});
谢谢!
答案 0 :(得分:8)
您可以将父视图中的引用传递给子视图:
http://jsfiddle.net/puleos/hecNz/
var MainView = Backbone.View.extend({
initialize: function() {
this.$template = $("<span>foo</span>");
this.subview = new SubView({parent: this});
this.render();
},
render: function() {
this.$el.html(this.$template);
var element = this.$template.attr('id');
this.subview.setElement('#'+element).render();
},
hello: function() {
alert('Hello');
}
});
var SubView = Backbone.View.extend({
initialize: function(options) {
this.$template = $("<span>bar</span>");
this.parent = options.parent;
this.render();
},
render: function() {
this.$el.html(this.$template);
this.parent.hello();
}
});
var mainView = new MainView();
console.log(mainView);
答案 1 :(得分:2)
您可以尝试像这样扩展MainView
:
var SubView = MainView.extend({ });
然后,您应该在hello
内提供对MainView
功能的引用。
或者,在SubView
中,将其添加到您的render
函数中:
MainView.prototype.hello.call(this)
这将使用hello
实例的上下文(模板,其他变量等)调用MainView
中的SubView
函数。