Benim web uygulamasında, Sol tarafta bir masa, bir kullanıcı listesi var, ve kullanıcı bir ayrıntı sağdaki bölmede. Admin tablosunda bir kullanıcı tıklattığında, detayları sağ tarafta görüntülenir.

Sol tarafta UserListView ve bir UserRowView, ve sağ tarafta bir UserDetailView var. İşler biraz iş, ama garip bir davranışı var. Ben soldaki bazı kullanıcılar ' ı tıklatın, sonra da onları bir sil, ben art arda javascript görüntülenen tüm kullanıcılar için kutuları onaylayın.

Normal gibi gözüken olay bağlantılarını kaldırılmış gibi görünüyor. UserRowView yeni bir UserDetailView her zaman yapmalıyım? Bir görünüm korumak ve referans modeli değiştirmek gerekir? Geçerli görünümü takip etmek ve yeni bir tane oluşturmadan önce onu ortadan kaldırmalı mıyım? Ben kayboldum ve herhangi bir fikri kabul edilecektir. Teşekkür ederim !

Burada sol görünüm kodu (satır ekran, click olayı, doğru oluşturma görünümü)

window.UserRowView = Backbone.View.extend({
    tagName : "tr",
    events : {
        "click" : "click",
    },
    render : function() {
        $(this.el).html(ich.bbViewUserTr(this.model.toJSON()));
        return this;
    },
    click : function() {
        var view = new UserDetailView({model:this.model})
        view.render()
    }
})

Ve görüntülemek için kod (sil düğmesi)

window.UserDetailView = Backbone.View.extend({
    el : $("#bbBoxUserDetail"),
    events : {
        "click .delete" : "deleteUser"
    },
    initialize : function() {
        this.model.bind('destroy', function(){this.el.hide()}, this);
    },
    render : function() {
        this.el.html(ich.bbViewUserDetail(this.model.toJSON()));
        this.el.show();
    },
    deleteUser : function() {
        if (confirm("Really delete user "   this.model.get("login")   "?")) 
            this.model.destroy();
        return false;
    }
})

Ben bakımı zor olur onlar her zaman yok ve ben böylece, tek sayfa uygulamam daha büyük ve daha büyük, kullanılmayan bellekte canlı izleme tutacak gibi çünkü görünümleri oluşturmak yeniden kullanın.

Aşağıda temiz görüşlerimi bellek sızıntıları önlemek için kullandığım bir yöntem daha basit bir versiyonu.

Ben benim ilk görünüm devralan bir BaseView oluşturun. Temel fikir bu benim görüşüm tutacak bir başvuru için tüm olaylar için olan bu abone için, o zaman atın Görünümü, tüm bu bağlantıları otomatik olarak ilişkisiz olması. İşte benim BaseView örnek bir uygulama:

var BaseView = function (options) {

    this.bindings = [];
    Backbone.View.apply(this, [options]);
};

_.extend(BaseView.prototype, Backbone.View.prototype, {

    bindTo: function (model, ev, callback) {

        model.bind(ev, callback, this);
        this.bindings.push({ model: model, ev: ev, callback: callback });
    },

    unbindFromAll: function () {
        _.each(this.bindings, function (binding) {
            binding.model.unbind(binding.ev, binding.callback);
        });
        this.bindings = [];
    },

    dispose: function () {
        this.unbindFromAll(); // Will unbind all events this view has bound to
        this.unbind();        // This will unbind all listeners to events from 
                              // this view. This is probably not necessary 
                              // because this view will be garbage collected.
        this.remove(); // Uses the default Backbone.View.remove() method which
                       // removes this.el from the DOM and removes DOM events.
    }

});

BaseView.extend = Backbone.View.extend;

Bir Görünüm bir model veya koleksiyon bir olaya bağlamak gerektiğinde, bindTo yöntemi kullanırdım. Örneğin:

var SampleView = BaseView.extend({

    initialize: function(){
        this.bindTo(this.model, 'change', this.render);
        this.bindTo(this.collection, 'reset', this.doSomething);
    }
});

Ben bir görünüm kaldırmak zaman, ben sadece, her şey otomatik olarak temiz olacak: imha yöntemi

var sampleView = new SampleView({model: some_model, collection: some_collection});
sampleView.dispose();

"Raylar" e-kitap ve bu kitabı kabul ettiler tekniği olduğuna inanıyorum. Backbone.js bu yazan millet ile bu tekniği paylaştım

Güncelleme: 2014-03-24

Backone olarak 0.9.9, dinle ve stopListening Olaylar bindTo ve unbindFromAll teknikleri aynı yukarıda gösterilen kullanılarak eklendi. Ayrıca, Görünüm.aramalar otomatik olarak stopListening kaldırmak ve bağlayıcı yığınının bu kadar kolay şimdi.

var SampleView = BaseView.extend({

    initialize: function(){
        this.listenTo(this.model, 'change', this.render);
    }
});

var sampleView = new SampleView({model: some_model});
sampleView.remove();