ember.js changing a view from another view

Question

I have a show view that displays the selected item from a list. Then when i click on the edit button it displays the edit view via {{#if isEditing}}

When I click another item in the list the display view changes to the new selected item but stays in the isEditing state.

How can I change the isEditing state of a view from another view ?

I have done this at the moment with a FocusOut function that sets isEditing to false but I have 2 text fields in this view and so when I click into the other text field it triggers the focusOut function as well.

This must be simple but can't seem to figure it out!

Answer 1

Nice question. I think you need to do something a little more complicated than a simple binding to drive the content of the App.SelectedItemView. I would try another computed property instead:

App.SelectedItemView = Ember.View.extend({
  isEditing: false,
  content: function() {
    var selectedItem = App.SelectedItemController.get('content');
    this.set('editingItem', false);
    return selectedItem;
  }.property('App.SelectedItemController.content'),
});

The trick about computed properties is that you can accomplish the same thing as a simple binding, but you can also add custom code to execute when the observed value changes (like conditionally setting editingItem to null in this case). The downside to a computed property is that it's a little more complicated to do a two-way binding (e.g. in this case to set App.SelectedItemController.content whenever App.SelectedItemView.content changes)--but it sounds like you don't need to do that anyway.

Answer 2

How can i change the isEditing state of a view from another view ?

I don't think this is really want you want to do. In the click event for the item you are probably changing the content property of the controller. You want isEditing to be false whenever the content changes.

You can set up an observer to handle this:

App.SelectedItemView = Ember.View.extend(
{
    isEditing: false,
    contentBinding: 'App.SelectedItemController.content',
    contentChanged: function ()
    {
        this.set('isEditing', false);
    }.observes("content")
});