Ember.js changing a view from another view

Question

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

When I click on another item in the list, the screen view changes to the newly selected item, but remains in isEditing state.

How to change the state of an isEditing view from another view?

I did this at the moment using the FocusOut function, which sets isEditing to false, but I have 2 text fields in this view, so when I click on another text field, it also runs the focusOut function.

It should be simple, but can't seem to figure it out!

Answer 1

Good question. I think you need to do something more complex than just binding in order to manage the contents of the App.SelectedItemView . Instead, I will try another computed property:

 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 exact same thing as simple binding, but you can also add custom code to execute when the observed value changes (for example, the conditional value of editingItem is null in this case) A computed property is that it’s a bit more difficult to do two-way binding (for example, in this case, to set App.SelectedItemController.content when you change App.SelectedItemView.content ) - but it looks like you don't need to do this anyway.

Answer 2

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

I do not think that it really is so desirable. In the click event for an element, you probably change the content property of the controller. You want isEditing be false when changing content .

You can configure the observer in this way:

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

Answer 3

You would not want the two views to be logically connected directly like this: rather, you would like this correlation to occur either through the binding (perhaps not in this case, since the editing of butotn does not seem to be bound to the model or property?) or through a function in the controller layer?