用BackboneJS从子视图调用视图函数

Call view function from subview with BackboneJS

本文关键字：视图 调用 函数 BackboneJS      更新时间：2023-09-26

我想知道是否有可能从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();
    }
});

谢谢!

你可以将父视图的引用传递给子视图:

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

您可以尝试这样扩展MainView:

var SubView = MainView.extend({ });

这应该给你一个MainView中的hello函数的引用。

或者，在SubView中，将此添加到render函数:

MainView.prototype.hello.call(this)

这将使用SubView实例的上下文(模板，其他变量等)调用MainView中的hello函数。

相关文章：