Question

我找不到关于这个问题的问题，虽然我想以前有人会遇到这个问题。对不起，如果我重新发帖。

我正在创建一个组件的问题。想象一下将组件实现为ItemView，它将UI的某些元素定义为“View.ui”哈希。

如果我想通过继承它并添加额外的ui元素定义来创建该组件的专用版本，会发生什么？我在这里得到的是新定义会覆盖父定义，因此父功能会中断。

是否有解决此问题的常用解决方案？

我想到的唯一一个是调整基本Marionette View类的“ .extend”功能，以便在子类化时特别对待这些“ui”和“triggers”属性，使用更像“ .merge“而不是”_.extend“。

还有其他想法吗？

提前感谢，

Answer 1

您可以在继承对象构造函数中使用_.extend来合并哈希。

小提琴：http://jsfiddle.net/puleos/zkBCm/

var ParentView = Backbone.Marionette.ItemView.extend({
    ui: {
        link : 'a',
        checkbox : "input[type=checkbox]"
    }
});

var ChildView = ParentView.extend({
    ui: {
        list : 'ul'
    },
    constructor: function(options) {
        var args = Array.prototype.slice.apply(arguments);
        ParentView.prototype.constructor.apply(this, args);
        this.ui = _.extend(this.ui, ParentView.prototype.ui);
    }
});

var parentView = new ParentView();
var childView = new ChildView();

console.log('parent', parentView.ui); // Returns link & checkbox
console.log('child', childView.ui);   // Returns ul, link & checkbox

Answer 2

与斯科特相同，但我认为它更直接。我没有看到重写构造函数的重点。我正在查看每个视图类型（ItemView，CompositeView，CollectionView）的构造函数，并且它们每个都以不同的方式构建。因此，只需将最后一行放在初始化函数中，它就可以在所有视图中使用。

所以喜欢这个。

initialize: function () {
    this.ui = _.extend(this.ui, ParentView.prototype.ui);
},

Answer 3

我的解决方案更像是这样：

var ParentView = Backbone.Marionette.ItemView.extend({
    events: {
        'click @ui.link': 'onLinkClick'
    },

    ui: {
        link : 'a',
        checkbox : 'input[type=checkbox]'
    },

    onLinkClick: function () { ... }
});

var ChildView = ParentView.extend({
    events: _.extend({
       'click @ui.buttonStuff': 'onButtonStuffClick'
    }, ParentView.prototype.events),

    ui: _.extend({
        buttonStuff : 'button[data-action=do_stuff]'
    }, ParentView.prototype.ui),

    onButtonStuffClick: function () { ... }
});

是的，您必须为每个子类执行此操作，但语法相当紧凑。

我一直用Backbone这样做。我还没有尝试任何木偶项目，但我看不出任何理由不起作用。

这类似于minijag的解决方案，但效率更高。不是在每次实例化类时扩展哈希值，而是在定义类时将它们精确地扩展一次。

触发器和ui部分子类化View子类

3 个答案: