Ember 2.6 按钮操作绑定不触发模板更新
Ember 2.6 button action binding not triggering template update
我来到堆栈溢出时感觉有点挫败。我已经广泛搜索了这个问题的答案,但我有一个按钮的操作似乎没有触发模板的正确更新,我不知道为什么。
我正在直接从 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
,路由(意外错误的主要来源)代理路由的模型挂钩返回的模型。
为了以这种方式使用路由操作,您需要更新控制器上的参数,或更新模型上的属性。
或者,实现控制器。 用于处理操作和公开计算属性的顶级路由控制器仍然完全可以,尽管您可能听说过遥远的未来弃用。
相关文章:
- Angular:更新一次性绑定的数据
- AngularJS 1.5.x服务未正确绑定,并且未在控制器中更新
- AnguarJS 1.3使用一次性绑定手动更新绑定
- Angular$watch未更新绑定
- 是否可以在extjs5中动态更新绑定
- 如何在引导日期范围选取器日期更改时更新绑定
- 将更新绑定到链接中的指令元素,而不是内联
. - 表单提交不会更新绑定到单选按钮的模型
- 如何在 d3.js 中更新绑定数据
- 角度更新绑定配置
- 为什么我的 ko 计算的可观察量在其值更改时不更新绑定的 UI 元素
- KnockoutJS-一个计算可写的可观察对象;无法正确更新绑定
- 在AngularJS中,如何为多个控制器的共享服务属性的异步模型更改更新绑定[.]
- js:更新绑定
- 更新绑定与jQuery排序
- Angular.js:手动修改后更新绑定
- JqxGrid过滤器值在更新绑定数据时清除
- 如果以编程方式更改了模型,Ko不会更新绑定控件
- 为什么不't将通知更新绑定到变量
- 更新绑定到表单表的observableArray会导致焦点丢失