4

DefinedWordオブジェクトのリストがあり、それぞれがページの下部にあるdiv{{#each}}のリストとしてブロックにレンダリングされているとします。DefinedWordView

ユーザーが単語をクリックすると、関連するを検索しますDefinedWord。DefinedWordViewここで、このためにレンダリングされたものへの参照が必要なので、'sdivDefinedWordを実行できます。ScrollTo()DefinedWordView

ビューは、ロード時に各モデルオブジェクトに後方参照をスタンプすることができますが、少し醜いようです。大したことではありませんが、他の多くの操作でこれを行う必要があると思います。モデルオブジェクトにビューへの逆参照を散らかしたくないのです。

ember-y誰かがこれを処理するためのイディオムの提案がありますか？たぶんEmberJS、標準の「シングルトンビューレジストリ」か何かが必要ですか？

4

2 に答える 2

2

モデルにミックスインを使用させますEm.Evented。

App.Word = Em.Object.extend(Em.Evented, {
  // ...
});

モデルがクリックされたら、そのモデルでイベントをトリガーします。それを呼び出しましょうselected。

App.WordView = Em.View.extend({
  click: function () {
    // content == the model
    this.get('content').trigger('selected');
  }
})

モデルのビューはそのイベントにバインドでき、発生したらそれ自体にスクロールします。

// just pseudo code:
App.DefinedWordView = Em.View.extend({
  init: function () {
    this._super();

    //listen for the 'selected' event and call 'scrollToDefinition' on 'this'
    this.get('content').on('selected', this, 'scrollToDefinition');
  },

  scrollToDefinition: function () {
    $(document).scrollTo( this.$() );
  }
})
于 2012-11-30T02:24:47.770 に答える
1

https://stackoverflow.com/a/13638139/294247は素晴らしかったが、シグナリングにプロパティを使用するのは正しくないようでした。オブジェクトからディスパッチされたイベントを使用し、ビューを適切に反応させる必要があることに気付きました。

Ember.Eventedミックスインの使用：

App.DefinedWord = Ember.Object.extend(Ember.Evented, {
    // ...
    scrollToDefinition: function () {
        this.trigger('scrollToDefinition');
    }
});

App.DefinedWordView = Ember.View.extend({
    init: function () {
        this._super();
        this.get('content').on('scrollToDefinition', this, 'scrollToDefinition');
    },
    scrollToDefinition: function () {
        $(document).scrollTo(this.$());
    }
});
于 2012-12-01T22:37:43.880 に答える