2
2

More than 5 years have passed since last update.

TypescriptでBackbone.jsの共通イベントを作るには?

Last updated at Posted at 2013-08-26

BackboneでView間共通で呼び出したいイベントがあるときのイベントをどのように発生させるか悩んでいます(主に要素に変更が加えられたときの各種位置変更)。
今はとりあえず一番最初に共通イベントを作成後View.prototypeに紐付けて共通イベントを発生するようにしています。
今後のイベント範囲とか考えるとイベントの設定難しい。

test.ts
class View extends Backbone.View {
    event:Backbone.Events;
    constructor(options?){
        super(options);
    }
    method1(){
    this.event.trigger('render');
    }
}
//...

//initialize

var commonEvent = _.extend({},Backbone.Events);
View.prototype.event = commonEvent;

var view = new View();

var view2 = new View();
commonEvent.on('render',view.render,view);
commonEvent.on('render',view2.render,view2);

追記

コメントから少し見直して以下のように改めました。init時にprototypeを初期化するのをやめてlistenToを使うようにしました。

view.ts
class View extends Backbone.View {
    event:Backbone.Events;
    constructor(options?){
        super(options);
        this.listenTo(this.event,'render',this.render);
    }
    initialize(options){
        options || (options ={});
       //上書きもできるようにする?
       if(options.event) this.event = options.event;
    }
    method1(){
    //何かの処理
    
    this.event.trigger('render');
    }
}
View.prototype.event = _.extend({}.Backbone.Events)

class ViewA extends View{
    constructor(options?){
        super(options);
    }
}
init.ts
//init
var view1 = new View();
var view2 = new View();
var view3 = new ViewA();

var commonEvent = view1.event;
//省略

//再描画 view1,view2,view3が再描画
commonEvent.trriger('render');
//これでも再描画
view1.method1()

2
2
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2