骨干中自定义事件的优势是什么?

时间:2012-11-26 22:10:32

标签: javascript javascript-events backbone.js backbone-events

我理解自定义事件如何在Backbone中工作以及如何触发它们,但是我很难理解何时使用它们以及它们只是直接调用函数的目的。

e.g。

var MyView = Backbone.View.extend({
    tagName: 'div',
    className: 'myview',

    initialize: function() {
        this.model.on("mycustomevent", this.doSomething, this);
    },

    doSomething: function() { 
         console.log('you triggered a custom event');
    }

});

如果我没弄错,可以在其他方法中使用this.model.trigger("mycustomevent")来调用doSomething方法,但也可以使用this.doSomething()直接调用

在视图之外,可以使用

进行类似调用
var myview = new MyView({model:somemodel});

myview.model.trigger("customevent");

myview.doSomething();

我感到困惑的是为什么不放弃自定义事件并在需要时直接调用该方法?任何示例用途都将非常感谢!

2 个答案:

答案 0 :(得分:6)

您可能希望在代码中的不同位置添加多个处理程序,f.ex:

this.model.on("mycustomevent", this.doSomething, this);

// ... and somewhere else you add an anonymous function
this.model.on("mycustomevent", function() {
    console.log('do something');
});

然后当您触发事件时,它将执行所有处理程序。您还可以使用off取消绑定/管理单个或多个处理程序。

如果您询问有关事件模式的一般说明(也称为observer pattern发布/订阅等等),您应该寻找更多信息 - 深度文章或书籍。

答案 1 :(得分:1)

对于骨干,完美的例子是改变模型的属性。使用函数,你必须做这样的事情......

$( '#someUI' ).click( function {
   // update the model property
   myModel.someProperty = 'somethingDifferent';
   // update any ui that depends on this properties value
   $( '#uiThatDisplaysModelData' ).find( 'someSelector' ).html( 'somethingDifferent' );
   // save the model change to the server
   $.ajax( {
      url: 'somesaveurl',
      data: { someProperty: 'somethingDifferent' }
      success: callback
   } );
} );

然后在每个属性更改的代码中重复这些步骤。

使用主干和一点设置,可以通过以下方式完成相同的事情:

myModel.set( 'property', 'somethingDifferent' );

这是因为我们已将处理程序附加到此模型的changechange:property事件中。这些是由骨干自动为模型创建的自定义事件。因此,只要代码的任何部分操作模型,DOM更新和保存就可以自动完成。我们还可以将输入验证或我们想要的任何内容绑定到这些自定义事件。

它基本上只是将观察者模式应用于您的应用程序,其中事件属于可观察的对象,并且处理程序属于其观察者。

http://en.wikipedia.org/wiki/Observer_pattern