Question

我有一个骨干视图，当点击这样的按钮时会创建一个子视图：

    buttonClick: function () {
        var newView = new ChildView({ parent: this });
        this.$('.container').append(newView.render().$el);
    }

完成后，我希望能够单击关闭的“保存”按钮并删除此子视图。所以当我点击保存按钮时，我会触发一个事件：

saveClick: function () {
    //do some stuff and also remove that child view we added earlier
    this.trigger('removeChild');
}

然后我在我的孩子视图中听这个事件：

   initialize: function (options) {
        this.parent = options.parent;
        this.listenTo(this.parent, 'removeChild', this.remove());
    },

    remove: function() {
        console.log("removing this view");
    }

但由于某种原因，它从来没有这么做。没有错误，它只是没有做任何事情。

我缺少什么重要的东西？

由于

Answer 1

你应该将一个函数绑定到listenTo，如下所示：

this.listenTo(this.parent, 'removeChild', this.remove);

以下是一些建筑提示：

不要将父母传给孩子，将模块间的沟通留给模特（这是一个很好的而不是必须的）
推荐：扩展骨干查看能够拥有子视图的对象或功能，例如：


// Note that if model or collection is not overriden, this parent's model and collection
// will be automaticaly passed down.
views: {
    '.js-some-selector': MyChildView,
    '.js-some-other-selector': {
        view: SomeOtherView,
        options: function() {
            someOption: this.somethingFromParent
        }
    }
}

注意：就像views变量一样，选项应该是一个对象或函数，它是当您想要从父级访问某些内容时（通过this）。

或者它可以是一个功能：

views: function() {
    var views = {};

    // Because it is a function you can conditionally add views:
    if (this.isLoggedIn) {
        views['.js-account-summary'] = AccountSummaryView;
    }

    return views;
}

然后你应该：

覆盖.remove，以便删除子视图
创建一个.render方法，该方法呈现父级，然后是子视图
很高兴：创建一个.serialize方法，负责将上下文对象传递给模板渲染方法

使用触发器从父视图中删除子视图

1 个答案: