使用BackboneJS从子视图调用视图功能

时间:2013-05-07 19:54:55

标签: javascript backbone.js

我想知道是否可以使用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();
    }

});

谢谢!

2 个答案:

答案 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函数。