Question

Say I have a list of DefinedWord objects, which are each rendered in an {{#each}} block as a list of DefinedWordView divs at the bottom of the page.

When a user clicks a word, I lookup the associated DefinedWord. Now I want a reference to the DefinedWordView rendered for this DefinedWord, so I can ScrollTo() the DefinedWordView‘s div.

I can always have the views stamp each model object with a back-reference when they load, but it seems a little ugly. Not a big deal, but I think I’ll need to do this for lots of other operations, and I’d rather not litter my model objects with back-references to views.

Anyone have suggestions for an ember-y idiom to handle this? Maybe EmberJS needs a standard “singleton view registry” or something?

Answer 1

Make your model use the Em.Evented mixin:

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

When your model is clicked, trigger an event on it, let’s call it selected.

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

The model’s view can bind to that event and when it’s fired, scroll to itself:

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