0

バックボーンがビューを処理する方法について質問があります。次のコードがあるとします。

<div id="container">
   <div id="header">
   </div>
</div>

この後、ヘッダーをバックボーンビューに変更します。

ビューの使用が終了した後、ヘッダーdivからそのビューを再度削除し、同じdivに別のビューを追加するにはどうすればよいですか？

ビューが保存されている変数を上書きしてみました。これにより、ビューが新しいビューに変更されます...ただし、古いビューのすべてのイベントハンドラーがアタッチされたままになります。

前もって感謝します！

4

1 に答える 1

1

http://documentcloud.github.com/backbone/#View-setElement

これにより、元のdivが自動的に削除されることはありません。何らかの方法で自分で削除する必要がありますが、setElementを使用すると、ビューの要素を渡したものに設定できます。すべてのイベントが適切に添付されます。 。次に、その要素をどこにでも追加する必要があります。

---これをもう一度試してみましょう----

したがって、最初に覚えておくべきことは、ビューがDOM要素を参照することです。それらは非常に緊密にバインドされていません。したがって、$elの下のjqueryオブジェクトを直接操作できます。

var containerView = new ContainerView();

var headerView = new HeaderView();
var anotherHeaderView = new AnotherHeaderView();

containerView.$el.append(headerView.$el);
containerView.$el.append(anotherHeaderView.$el);

anotherHeaderView.$el.detach();

containerView.$el.prepend(anotherHeaderView.$el);

または、これを制御するメソッドを作成することもできます。

var ContainerView = Backbone.View.extend({
    addView: function (view) {
        var el = view;
        if(el.$el) { //so you can pass in both dom and backbone views
            el = el.$el;
        }
        this.$el.append(el);
    }
});

たぶん、ビューの順序でビューを設定しますか？

var ContainerView = Backbone.View.extend({
    initialize: function () {
        this.types = {};
    },
    addView: function (view, type) {
        var el = view;
        if(el.$el) { //so you can pass in both dom and backbone views
            el = el.$el;
        }
        this.types[type] = el;
        this.resetViews();
    },
    removeView: function (type) {
        delete this.types[type];
        this.resetViews();
    },
    resetViews: function () {
        this.$el.children().detach();
        _.each(['main_header', 'sub_header', 'sub_sub_header'], function (typekey) {
            if(this.types[typekey]) {
                this.$el.append(this.types[typekey]);
            }
        }, this);
    }
});
于 2012-11-23T15:18:19.270 に答える