Ember 2.6 按钮操作绑定不触发模板更新

Ember 2.6 button action binding not triggering template update

本文关键字:更新 绑定 按钮 操作 Ember      更新时间:2023-09-26

我来到堆栈溢出时感觉有点挫败。我已经广泛搜索了这个问题的答案,但我有一个按钮的操作似乎没有触发模板的正确更新,我不知道为什么。

我正在直接从 ember 文档中处理路由操作,并且尝试了更多的东西组合,例如内联与组件,而不是我想管理的。 唉,我被难住了,所以我来这里寻求帮助。这是我的代码:

// 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}}

它调用的组件本身相当简单,看起来像这样:

// 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}}

较低的组件也存在,但与此问题无关。

这个问题的踢球者是,正如你从上面的代码中看到的,我还有一个绑定到同一属性的余烬输入助手。更新此文本输入有效,并导致下部组件中的条件按预期触发,并更新按钮文本。但是,对于按钮,按钮函数中的下部组件既不是条件的,也不是内联条件的,而是保持默认状态。

我已经详尽地尝试寻找答案,但出现空白。我还尝试在路由和下部组件上使用计算属性但无济于事。我相信这是一个简单的解决方案,但我完全错过了它。

所以我的问题很简单,为什么按钮中的操作不会触发模板中的条件更新?console.log事件触发。任何帮助将不胜感激。

Route的属性在模板中不可用。 模板的上下文是路由的Controller,路由(意外错误的主要来源)代理路由的模型挂钩返回的模型。

为了以这种方式使用路由操作,您需要更新控制器上的参数,或更新模型上的属性。

或者,实现控制器。 用于处理操作和公开计算属性的顶级路由控制器仍然完全可以,尽管您可能听说过遥远的未来弃用。