3

誰かが以前にこの問題に直面したことがあると思いますが、この件に関する質問は見つかりませんでした。再投稿でしたらすみません。

作成中のコンポーネントに問題があります。UI の特定の要素を「View.ui」ハッシュとして定義する ItemView として実装されたコンポーネントを想像してください。

そのコンポーネントをサブクラス化して特別なバージョンのコンポーネントを作成し、余分な ui 要素定義を追加したい場合はどうなりますか? 私がここで得ているのは、新しい定義が親の定義を上書きするため、親の機能が壊れているということです。

この問題を回避する一般的な解決策はありますか?

私の頭に浮かぶ唯一のことは、サブクラス化時にこれらの「ui」および「トリガー」属性を特別に扱うために、ベースマリオネットビュークラスの「.extend」機能を微調整することです。 "_。拡張する"。

他の考えはありますか？

前もって感謝します、

4

3 に答える 3

2

継承オブジェクト コンストラクターで _.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
于 2013-05-10T17:56:06.680 に答える
1

スコットと同じですが、もう少し単純だと思います。コンストラクター関数を書き直す意味がわかりません。各ビュー タイプ (ItemView、CompositeView、CollectionView) のコンストラクター関数を見ていましたが、それぞれ異なる方法で構築されています。したがって、初期化関数の最後の行を貼り付けるだけで、すべてのビューで機能するはずです。

このように。

initialize: function () {
    this.ui = _.extend(this.ui, ParentView.prototype.ui);
},
于 2015-04-02T00:04:06.207 に答える
1

私の解決策は、次のようなものです。

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 のソリューションに似ていますが、より効率的です。クラスがインスタンス化されるたびにハッシュを拡張するのではなく、クラスが定義されたときに一度だけ拡張します。

于 2015-10-14T00:28:08.510 に答える