Question

我开始玩backbone.js并遇到过一个问题。我希望能够通过onclick事件显示/隐藏div（由视图呈现）。事实是事件只适用于子元素，而被点击的元素是视图的sibbling / parent。我通过在视图'initialize'函数中添加一个处理程序来解决这个问题但是我不这样做。我也没有使用“家庭观点”，我怎么能得到这个呢？

Answer 1

如果没有父视图，那么您可以在每个视图之外的视图之间连接事件。

var viewClicked = new ViewClicked();

var viewListening = new ViewListening();

viewListening.listenTo(viewClicked, "clicked:view", viewListening.respondToClick);

您不需要父视图来执行上述操作，即使父视图可能是评论建议的好主意。实际上，无论您是否在父视图中连接事件，该方法都是相同的！

所以你可以通过在初始化函数中处理事件来实现，但是将一个视图耦合到另一个视图。或者你可以像上面所说的那样做，这会阻止视图耦合，但需要父视图，某种关闭或污染全局范围。通常最好不要紧密地紧密耦合视图，因为它减少了封装和可能的重用，所以你可以考虑改变以某种方式采用上述方法。

最后，您可以使用某种中央事件总线（pub子对象），这在this question中有所讨论。这将引入另一个对象，但允许您在视图的intialize函数中处理事件，但耦合较少（您将耦合到全局或作用域事件总线，而不是特定视图）。

当然，您也可以在父视图中使用本地范围的事件总线：）

<强>更新

如果您只有一个视图且锚点在视图之外，则可以在锚点上使用标准jQuery click事件来调用视图上的切换功能。重要的是要注意使用_.bindAll来确保切换事件的上下文是视图对象。例如：

HTML

<a href="#" id="showView">click me</a> 

<div id="myView"></div>

JAVASCRIPT

var MyView = Backbone.View.extend({
    initialize: function() {
        // _.bindAll binds functions called by events to the 
        // view (by passing it the view context as 'this'
        _.bindAll(this, "toggle");

        // put some content in the view
        this.$el.append("Now you see me!");
    },

    toggle: function() {
        // jQuery toggle function
        this.$el.toggle();
    }
});

var myView =  new MyView({ el: $("#myView")});

$("#showView").click(myView.toggle);

我已经为您提供了working fiddle，因此您可以看到它的实际效果。

我提到的关于使用父视图或某种关闭的初始点仍然是一个好主意。真的有什么理由不去吗？

更新2

使用包含子视图的父视图执行此操作如下：

HTML

<div id="parentView"></div>

JAVASCRIPT

var ShowView = Backbone.View.extend({
    events: {
        "click #showView": "click"
    },

    click: function() {
        this.trigger("showView:click");
    },

    render: function() {
        this.$el.append('<a href="#" id="showView">click me</a>');
        return this;
    }
});

var MyView = Backbone.View.extend({
    initialize: function() {
        // _.bindAll binds functions called by events to the 
        // view (by passing it the view context as 'this'
        _.bindAll(this, "toggle");

        // put some content in the view
    },

    render: function() {
        this.$el.append('Now you see me!');
        return this;
    },

    toggle: function() {
        // jQuery toggle function
        this.$el.toggle();
    }
});

var ParentView = Backbone.View.extend({
    initialize: function() {
        this.showView = new ShowView({ 
            id: "showView"
        });
        this.myView = new MyView({ 
            id: "myView"
        });
        this.listenTo(this.showView, "showView:click", this.myView.toggle)
    },

    render: function() {
        this.$el.append(this.showView.render().$el);
        this.$el.append(this.myView.render().$el);
        return this;
    }

});

var parentView = new ParentView ({el: $("#parentView") });
parentView.render();

这是展示它的working fiddle。您可能认为使用父视图的方法对于您的问题的上下文来说是过度的，您可能是对的！但是，随着您的应用程序变得越来越复杂，许多层次上嵌套了许多视图，您会发现父视图方法开始变得更有意义并且变得更加自己。

使用backbone.js显示/隐藏div / view

1 个答案: