Ember 2.6 button action binding not triggering template update

Question

I come to stackoverflow feeling a little defeated. I have searched far and wide for an answer to this, but I have an action from a button that appears to not be triggering a proper update of a template, and I don't know why.

I'm working directly off of the ember docs for route actions and have tried more combinations of things, like inline vs component, than I would like to admin. Alas I am stumped, so I am coming here for help. Here is my code:

// app/admin/users/edit/route.js
import Ember from 'ember';

export default Ember.Route.extend({
  isEditingPassword: false,
  actions: {
    toggleBody() {
      this.toggleProperty('isShowingBody');
    },
    editPassword() {
      this.toggleProperty('isEditingPassword')
      console.log('(after toggle) isEditingPassword', this.get('isEditingPassword'))
    },
    saveUser(model) {
      model.save().then(()=> {
        console.log('we saved!')
        this.transitionTo('admin.users');
      })
    }
  }
});

<!-- app/admin/users/edit/template.hbs -->
{{outlet}}
<button {{action "editPassword" on="click"}} class='button is-danger'>{{if isEditingPassword "Edit user" "Edit Password"}}</button>
{{input class="input" type="text" name='title' value=isEditingPassword placeholder="True"}}


{{#admin-user isEditingPassword=isEditingPassword model=model saveUser='saveUser'}}{{/admin-user}}

The component itself that this is calling is rather simple, and looks like this:

// app/components/admin-user/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    saveUser(model) {
      console.log('save the user!', model)
      this.sendAction('saveUser', model);
    },
    cancel() {
      this.sendAction('cancel')
    }
  }
});

<!-- app/components/admin-user/template.hbs -->
{{yield}}
{{#unless isEditingPassword}}
  {{#admin-user-form model=model
    saveUser='saveUser'}}
  {{/admin-user-form}}
{{else}}
  {{#admin-user-password-form model=model
    saveUser='saveUser'}}
  {{/admin-user-password-form}}
{{/unless}}

Lower components are also there, but not relevant to this question.

The kicker with this issue, is that as you can see from the code above, I also have an ember input helper that is bound to the same property. Updating this text input works, and causes the conditional in the lower component to fire as expected and the button text to update. However with the button, neither the lower component conditional, nor the inline conditional in the button function at all, and stay at the default state.

I have exhaustively tried searching for answers to this, but am coming up blank. I have also tried utilizing computed properties both on the route and lower component to no avail. I am sure it is a simple solution, but I am completely missing it.

So my question is simple, why would the action from the button not trigger the conditional to update in the template? The console.log event does fire. Any help would be appreciated.

runspired runspired · Accepted Answer · 2016-07-12T16:22:55

Properties on Route are not available in your template. The context for your template is the Controller for the route, which (big source of unexpected bugs) proxies to the model returned by your Route's model hook.

In order to use a route action in this way, you would need to update the param on the controller, or update a property on the model.

Alternatively, implement the Controller. Top level route controllers for handling actions and exposing computed properties are still perfectly ok, despite what you may have heard about far future deprecations.

Ember 2.6 button action binding not triggering template update

1 Answers