Backbone:如何让视图订阅自己

时间:2014-07-16 00:16:19

标签: backbone.js

在骨干中,我希望拥有一个使用,销毁和清理的子视图。 '自我清理'我在理解正确的(如果有的话)做法方面遇到了问题。所以一个人为的例子是:

var B = Backbone.View.extend({
    sayHello: function () {
        this.trigger('hello');
    }
});

var A = Backbone.View.extend({
    initialize: function () {
       var b = new B();

       b.listenTo(b, 'hello', function () {
            console.log('hello');
        });

        b.sayHello();

        b.remove();
    },
});

var a = new A();

这部分特别看起来很奇怪:

b.listenTo(b, 'hello', function () {
    console.log('hello');
});

有一个视图listenTo本身是正常的吗?有更好的方法吗?

1 个答案:

答案 0 :(得分:1)

从技术上讲,您的代码应该可行。

有一个视图听自己有很多合法的用途(实际上我写了一个完整的框架)。主要目的是将View构建为抽象(有时多次)并且需要一种与其子视图进行通信的方式。当你有多个程序员使用彼此的代码时,这变得非常重要(一个是编写核心组件,另一个是实现核心组件,另一个是采用该实现并进一步扩展它以用于他自己的目的)例如:

//The Abstract Model. Programmer shouldn't have to know how animal works. The programmer
//can create models extended off of this and just subscribe it's triggers (and trigger it's own)
var Animal = Backbone.View.extend({
   initialize: function() {
      //A lot of stuff happens when an animal gets scared. But these are the 
      //things ALL Animals do
      this.listenTo(this, 'scared', function(){
         this.run();
         this.hide();
      });
   },
   //This is how ALL Animals run
   run: function (){
     console.log('Running away with tail between legs');
     //Just in case an animal does something in ADDITION to what's above they can 
     //subscribe to running and do their own extra stuff
     this.trigger('running');
   }
});

//So a programmer decided to create a cat  
var Cat = Animal.extend({
    initialize: function(){
        //A cat listens for barks (from some external source like a mediator).
        this.listenForBarks();
        //it addition to whatever happens when an Animal is scared (and any other external factors/object that choose to subscribe to it) a cat will hiss
        this.listenTo(this, 'scared', this.hiss);
        //when a cat runs it does something specific to a cat (like jumping on a garbage cans)
        this.listenTo(this, 'running', this.jumpOnGarbageCan);
    },
    //When it heads barks, it gets scared
    listenForBarks: function(){
        this.listenTo(Backbone, 'bark', function(){
            //As a programmer I don't really know how Animals react when they're scared.
            //But just in case anyone (like by Parent Object) knows or somebody else in the outside world (like a Human object) wants to know I'll broadcast it
             this.trigger('scared');
        });
    },
    hiss: function(){
        this.trigger('hiss');
        console.log('hiss');
    },
    jumpOnGarbageCan: function(){
        console.log('jump!');
    }
});


var Dog = Animal.extend({
   bark: function(){
      //a dog barks for some reason. It doesn't know what a cat is (or that the cat even exists). Just decided to bark at some point. It broadcasts it to the world (via the Mediator)
      Backbone.trigger('bark');
   }
});

我在代码中唯一要改变的就是移动

b.listenTo(b, 'hello', function () {
   console.log('hello');
});

部分加入B' initialize函数并将b(第一个参数)替换为this(类似于我在示例中的操作方式。一个视图正在倾听它应该在它自己的初始化函数中执行它。