backbone.js - 在backbone.js的另一个视图中使用时listenTo不起作用

Question

我是主干的新手。我有一个名为 AbcView abc.js 的视图

var AbcView = Backbone.View.extend({

    events: {
        "click" : "display",
    },
    display: function(e){
        console.log("hello");
        alert("click function");
    }
});

现在我将这个 abc.js 传递给另一个 xyz.js 文件并使用 ListenTo 在另一个视图中调用它。

xyz.js

var xyzView = Backbone.View.extend({
    initialize: function(){
        var AbcView = new AbcView ();
        this.lisenTo(AbcView, "click",this.display);
    },
    render: function(){
        var html = this.template(AbcView);
        this.$el.html(html);
        return this;
    },
    display: function(e){
        console.log("parent hello");
        alert("parent display function");
    }
});

使用 abc.js 点击事件触发正常。但是使用 xyz.js 的点击事件不会触发。

这是调用listenTo的正确方法吗？

Answer 1

DOM 事件不委托给 View 对象。

但是，如果您想模拟这一点，则必须在 ABCdisplay方法中手动发出事件：

display: function(e){

    // Trigger manually
    this.trigger("click");

    // Your usual code
    console.log("hello");
    alert("click function");
}

就最佳实践而言，我可能会将“点击”重命名为更具描述性的事件名称。

Answer 2

Backbone 的on和listenTo用于监听 BackboneModels和Collections.

http://backbonejs.org/#Events-catalog

这是要理解的重要事情。它与 UI 事件绑定不同，如http://backbonejs.org/#View-delegateEvents中所述。

话虽如此，您可以使用西蒙建议的东西来混合两者。