Question

假设我有一个DefinedWord个对象列表，每个对象都在{{#each}}块中呈现为页面底部的DefinedWordView div列表。

当用户点击某个字词时，我会查找关联的DefinedWord。现在我想要引用为此DefinedWordView呈现的DefinedWord，因此我可以ScrollTo() DefinedWordView的div。

我可以随时在每个模型对象加载后用反向引用标记视图，但它看起来有点难看。没什么大不了的，但我想我需要为很多其他操作做这件事，而且我宁愿不用我对视图的反向引用来丢弃我的模型对象。

有人建议使用ember-y成语来处理这个问题吗？也许EmberJS需要标准的“单例视图注册表”或其他什么？

Answer 1

让你的模特使用Em.Evented mixin：

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.$() );
  }
})

Answer 2

https://stackoverflow.com/a/13638139/294247很棒，但使用属性进行信号传输似乎不对。我意识到我应该使用从对象调度的事件，并让视图适当地做出反应。

使用Ember.Evented mixin：

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.$());
    }
});

获取对为给定模型对象创建的EmberJS视图的引用？

2 个答案: