jQuery: لماذا لا يطلق النار من كائن JS؟

Question

لقد قمت بتنفيذ شكل من أشكال نمط تصميم الناشر/المشترك في jQuery. أنا في الأساس بناء دروس في JavaScript باستخدام Coffescript التي تعمل كمكونات على صفحتي. أي التنقل ، عازف البيانات ، إلخ.

بدلاً من الحصول على أحداث Fire Enements ، لدي حالات من هذه الفصول التي تستخدم الزناد على أنفسهم لإرسال الأحداث المخصصة. يمكن لهذه الحالات بعد ذلك الاستماع إلى بعضها البعض ويمكنها تحديث عناصر DOM التي تملكها وفقًا لذلك على التغييرات في سلوك بعضها البعض!

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

هذا هو تنفيذ صفي:

window.List = (function() {
    List = function(element, settings) {
      var _a, _b, _c;
      this.list = $(element);
      this.settings = jQuery.extend(List.DEFAULTS, settings);
      this.links = this.list.find(this.settings.link_selector);
      this.links.selectable();
      _b = [SelectableEvent.COMPLETED, SelectableEvent.UNDONE, SelectableEvent.SELECTED, SelectableEvent.DESELECTED];
      for (_a = 0, _c = _b.length; _a < _c; _a++) {
        (function() {
          var event_type = _b[_a];
          return this.links.bind(event_type, __bind(function(event, selectable_event) {
            return this.dispatch(selectable_event);
          }, this));
        }).call(this);
      }
      return this;
    };
    List.DEFAULTS = {
      link_selector: "a",
      completed_selector: ".completed"
    };
    List.prototype.change = function(mode, previous_mode) {
      if (mode !== this.mode) {
        this.mode = mode;
        if (previous_mode) {
          this.list.removeClass(previous_mode);
        }
        return this.list.addClass(this.mode);
      }
    };
    List.prototype.length = function() {
      return this.links.length;
    };
    List.prototype.remaining = function() {
      return this.length() - this.list.find(this.settings.completed_selector).length;
    };
    List.prototype.dispatch = function(selectable_event) {
      $(this).trigger(selectable_event.type, selectable_event);
      return alert(selectable_event.type);
    };
    return List;
}).call(this);

انتبه على:

List.prototype.dispatch = function(selectable_event) {
    $(this).trigger(selectable_event.type, selectable_event);
    return alert(selectable_event.type);
};

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

$(document).ready(function() {
    var list_change_handler, todo_list;
    todo_list = new List("ul.tasks");
    list_change_handler = function(event, selectable_event) {
      return alert("Hurray!");
    };
    $(todo_list).bind(SelectableEvent.COMPLETED, list_change_handler);
    $(todo_list).bind(SelectableEvent.UNDONE, list_change_handler);
    $(todo_list).bind(SelectableEvent.SELECTED, list_change_handler);
    $(todo_list).bind(SelectableEvent.DESELECTED, list_change_handler);
}

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

تحديث:

وفقًا للمناقشة في التعليقات ، يبدو أن تسجيل "هذا" في وحدة التحكم يعيد كائن JS الذي يمثل الفصل. لكن تسجيل "$ (this)" يعيد كائن jQuery فارغ ، وبالتالي لن يتم إطلاق التشغيل. أي أفكار حول سبب ظهور $ (هذا) فارغة عندما يعيد "هذا" بدقة مثيل الفصل؟

Answer 1

اكتشفت أن jQuery لم يتمكن من فهرسة كائني لأن الفئة نفذت نسختها الخاصة من طريقة jQuery. في هذه الحالة ، الطول (). إعادة تسمية طريقة الطول () إلى Total () حل المشكلة تمامًا ويمكن لأي مثيل من الفصل أن يؤدي إلى حدوث أحداث بنجاح.