Backbone: تكرار الأحداث عند إنشاء العرض مرتين

بدافع الفضول ، لماذا تقوم بتجسيده مرتين؟ هل أنت في عرض محمول أو في شيء يتم فيه استبدال المثيل الأول في منفذ العرض بعرض آخر ، وعندما يعود المستخدم إلى هذا العرض الأول ، فإنك تحصل على روابط مزدوجة؟

شئ مثل هذا. لدي طريقة عرض منزلية ، والتي ستستدعي نقاط نهاية مختلفة إذا قام المستخدم بتسجيل الدخول أم لا. روابط الحدث مخصصة لأزرار تسجيل الدخول / تسجيل الخروج. يتم إنشاء كلا طريقتي العرض ولكن يتم تقديم واحدة فقط في ذلك الوقت. عند تسجيل الدخول أو الخروج ، سأنتقل إلى نفس طريقة العرض ولكن في وضع مختلف. أتمنى أن يكون هذا واضحًا بدرجة كافية.

لا يزال الأمر غير واضح تمامًا بالنسبة لي ، لماذا يتم إنشاء كلا الرأيين في نفس الوقت. إن ربط كلاهما بنفس العنصر الموجود مسبقًا في dom يعني أنه ستكون هناك أحداث مزدوجة. هذا ليس خطأ حقًا ، ولكن فقط الطريقة التي تعمل بها الأحداث وتفويض الأحداث على وجه التحديد.

إذا قمت بإنشاء مثيل لعنصر موجود مسبقًا ، فستحتاج إلى إلغاء ربط هذه الأحداث على وجه التحديد أو ستستمر حتى تتم إزالة عقدة العنصر نفسها من dom.

حسنًا ، يبدو أنها فكرة جيدة إنشاء مثيل لكلا العرضين أثناء التهيئة ، وربطهما بنفس عنصر الجذر في DOM ، ثم عرض أحدهما أو الآخر وفقًا لوضع تسجيل الدخول وجعله يستبدل عناصر الآخر أثناء العرض. أعتقد أن هناك طريقة أفضل للقيام بذلك ، من تعليقاتك.

أود إنشاء مثيل وجهات النظر عندما تحتاج إليها. إذا لم يتم استخدام أحد العروض ، فلا داعي لامتلاكه حول شغل الذاكرة وإحداث آثار جانبية محتملة كما تراه.

لا أميل إلى استخدام هذا النمط:

var View = Backbone.View.extend ({
    el: '#test',
    events: 
    {
        'click .test': 'onClick'
    },
    onClick: function(event) 
    { 
        ... 
    }
});

view = new View;
view.render();

لكني بدلاً من ذلك أميل إلى استخدام هذا النمط ، تمامًا لتجنب مشاهدات الزومبي التي تؤدي إلى تكرار الأحداث

var View = Backbone.View.extend ({
    events: 
    {
        'click .test': 'onClick'
    },
    onClick: function(event) 
    { 
        ... 
    }
});

view = new View;
$('#target').append(view.render().el);

الموقع الوحيد الذي سأستخدم فيه النمط الأول الخاص بك ، هو في عرض Chrome للتطبيق الذي يقوم بإنشاء مثيل واجهة المستخدم الرسومية:

var Application = Backbone.View.extend({
    el: '#wrapper',
    initialize: function (options)
    {
        this.render();
    }
)};

$(document).ready(function () {
    window.application = new Application();
});

مثلما قال el والسماح للعرض بإنشاء عنصر خاص به. أفعل ذلك 95٪ من الوقت أيضًا. ومع ذلك ، إذا كنت تريد تحديد el وتنظيف الأحداث عند الإزالة ، فيمكنك تحديد طريقة Backbone.View.destroy() باستخدام .off() مقابل كل on() وكل حدث في events: {}

فمثلا:

var MyView = Backbone.View.extend({

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

  render: function() {
    return this;
  },

  destroy: function() {
    this.remove();
    this.model.off('change', this.render, this);
  }
})

شكرًا ، malandrew و vincentbriglia ، هذا يساعد حقًا.

فقط لتحديث هذا للأجيال القادمة ... أضفت طريقة إتلاف إلى فئة العرض التي تبدو مثل هذا

           destroy: function() {
                this.undelegateEvents();
            }

ثم أقوم فقط بتدمير العرض الحالي (State.view) عندما أقوم بإنشاء مثيل ().