سؤال

أحاول أن أتعرف على Coachescript و Backbone.js ، ويجب أن أفتقد شيئًا.

هذا القهوة:

MyView  = Backbone.View.extend 
   events: { 
     "click" : "testHandler" 
   } 

   testHandler: -> 
     console.log "click handled" 
     return false 

 view = new MyView {el: $('#test_container')} 
 view.render()

يولد JavaScript التالي:

(function() {
  var MyView, view;
  MyView = Backbone.View.extend({
    events: {
      "click": "testHandler"
    },
    testHandler: function() {
      console.log("click handled");
      return false;
    }
  });
  view = new MyView({
    el: $('#test_container')
  });
  view.render;
}).call(this);

لكن ال click الحدث لا يطلق النار testHandler عندما أنقر في test_container.

إذا قمت بتغيير الإخراج javaScript إلى:

$(function() {
  var MyView, view;
  MyView = Backbone.View.extend({
    events: {
      "click": "testHandler"
    },
    testHandler: function() {
      console.log("click handled");
      return false;
    }
  });
  view = new MyView({
    el: $('#test_container')
  });
  view.render;
});

إزالة call(this) وإلحاق $, ، كل شيء يعمل كما هو متوقع. ماذا ينقصني؟

هل كانت مفيدة؟

المحلول

(function () {}).call(this);

هي مجرد وسيلة لاستدعاء وظيفة مجهولة على الفور أثناء تحديد جهاز الاستقبال. إنه يعمل بشكل أساسي بنفس الطريقة:

this.method = function () {};
this.method();

$(function () {}), ، على الأقل في jQuery ، هو اختصار ل

$(document).ready(function () {})

الذي يدير الوظيفة المحددة عندما تم بناء شجرة DOM بالكامل. يبدو أن هذا هو الشرط اللازم لك Backbone.View.extend تعمل للعمل بشكل صحيح.

نصائح أخرى

لاستخدام Coffescript و jQuery معًا لنصوص التطبيقات ، ضع الكود الخاص بك في هذا النوع من القالب:

$ = jQuery
$ ->

  MyView = Backbone.View.extend
    events:
      "click": "testHandler"
    testHandler: ->
      console.log "click handled"
      false

  view = new MyView el: $('#test_container')
  view.render()

حاول استخدام بناء جملة إعلان فئة CoffeScript ، على سبيل المثال:

class BacklogView extends Backbone.View
  constructor: (@el) ->
    this.delegateEvents this.events

  events:
    "click" : "addStory"

  # callbacks
  addStory: ->
    console.log 'it works!'

ماذا يحدث عندما يتم إنشاء العرض ، أو على الأقل طريقة العرض. يمكنك استدعاء طريقة View.DelegateEvents () لتعيين EventHandlers يدويًا.

فيما يلي Coffescript مماثلة لتقديم عرض childview في أحد الوالدين ثم تفويض أحداث childview.

window.ParentView = Backbone.View.extend
  addOne: (thing) ->
    view = new ChildView({model: thing})
    this.el.append view.render().el 
    view.delegateEvents()
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top