Question

我的一个主干视图的代码如下：

class GD.Views.Result extends Backbone.View
  template: JST['mobile/templates/result']
  tagName: 'tr'
  className: 'result'
  events:
    'click' : 'showDetail'
    'click #favourite' : 'addFavourite(Favourite)'
    'click #like' : 'addFavourite(Like)'
    'click #dislike' : 'addFavourite(Dislike)'
   render: ->
     $(@el).html(@template(model: @model))
     this
   addFavourite: (type) ->
     event.preventDefault()
     attributes =
       id: @model.id
       type: type
       cluster: @model.cluster
     @collection.create attributes,
     wait: true
     success: @updateIcons
     error: @handleError
   showDetail: ->
     ...
   updateIcons: ->
     ...
   handleError: ->
     ...

我在我的控制台中收到此错误：

Uncaught Error: Method "addFavourite(Favourite)" does not exist

我真的不明白为什么AddFavourite方法会发生这种情况，而不是showDetail方法 - 您是否不允许将需要定义参数的方法传递给任何事件？

非常感谢您的任何帮助（！）

Answer 1

正如@Derick所解释的，如果events元素的值是一个字符串，它会在视图对象上命名一个方法，因此您不能以这种方式指定参数。您需要（示例在JS中）：

仅将方法名称作为字符串提供，然后确定方法中的类型。 E.g。

events : {

  'click #favourite' : 'addFavourite',

  'click #like' : 'addFavourite',

  'click #dislike' : 'addFavourite'

}

addFavourite : function ( event ) {

  event.preventDefault();

  var type = event.target.id;

}

Suppy一个函数对象（在本例中，通过函数表达式）。在这种情况下，您可以提供一个调用通用addFavorite方法的函数，并将其传递给类型，例如：

events : {

  'click #favourite' : function ( event ) {

    this.addFavourite( event, 'favourite' );

  },


  'click #like' : function ( event ) {

    this.addFavourite( event, 'like' );

  },


  'click #dislike' : function ( event ) {

    this.addFavourite( event, 'dislike' );

  }

}

addFavourite : function ( event, type ) {

  event.preventDefault();

}

从我在你的例子中看到的，我会选择＃1。

请注意，这可能会更加动态，例如：

events : function () {

  var events = {};

  var view = this;

  [

    'favourite',

    'like',

    'dislike'

  ].forEach( function ( type ) {

    events[ "click #" + type ] = ( function ( type ) {

      return function ( event ) {

        view.addFavourite( event, type );

      };

    } )( type );

  };


  return events;

}

Answer 2

请勿在事件配置中指定参数。事件配置用作查找，它由名称而不是方法签名完成。

class GD.Views.Result extends Backbone.View
  template: JST['mobile/templates/result']
  tagName: 'tr'
  className: 'result'
  events:
    'click' : 'showDetail'
    'click #favourite' : 'addFavourite'
    'click #like' : 'addFavourite'
    'click #dislike' : 'addFavourite'
   render: ->
     $(@el).html(@template(model: @model))
     this
   addFavourite: (type) ->
     event.preventDefault()
     attributes =
       id: @model.id
       type: type
       cluster: @model.cluster
     @collection.create attributes,
     wait: true
     success: @updateIcons
     error: @handleError
   showDetail: ->
     ...
   updateIcons: ->
     ...
   handleError: ->
     ...

在定义参数时，骨干视图事件似乎不执行函数

2 个答案: