输入类型='checkbox' 双向绑定不起作用?
Input type='checkbox' two way binding doesn't work?
刚开始学习 ember.js,目前正在根据他们的指南处理 TODO MVC。我目前在这一步:http://emberjs.com/guides/getting-started/show-when-all-todos-are-complete/
我注意到如果我将 "checked" 属性挂钩到计算属性,双向绑定不会像我预期的那样工作。如果我手动 check/uncheck 复选框,该计算属性将不会更新该值。
这是简化的例子(好像他们的例子不够简单):
这是车把代码。我添加 '{{allAreDone}}' 元素只是为了能够实时查看值:
//...
<section id="main">
{{outlet}}
{{input type="checkbox" id="toggle-all" checked=allAreDone}}
{{allAreDone}}
</section>
//...
这是控制器的 js 片段,但我对其进行了简化,使其不基于另一个属性:
// ...
allAreDone: function(key, value) {
return false
}.property()
// ...
现在,如果我选中该框(即属性 'checked' = true),'allAreDone' 仍会显示 false。如果输入类型是文本,结果会有所不同。如果链接到非计算属性,双向绑定复选框也将起作用,例如:
// ...
allAreDone: false
//will return false if I uncheked the checkbox directly and vice versa
// ...
我只是想确认我对该行为的理解是正确的。为什么它与类型 'text'.
不同
谢谢!
您计算的 属性 定义是只读的。没有办法设置值,只能获取它。根据您的情况调整 the guides 中的示例:
allAreDone: function(key, value) {
// setter
if (arguments.length > 1) {
this.set('_allAreDone', value);
}
// getter
return this.get('_allAreDone');
}.property('_allAreDone'),
_allAreDone: false
这使用内部 属性 来存储实际值,但肯定适用于更具体的问题。
刚开始学习 ember.js,目前正在根据他们的指南处理 TODO MVC。我目前在这一步:http://emberjs.com/guides/getting-started/show-when-all-todos-are-complete/
我注意到如果我将 "checked" 属性挂钩到计算属性,双向绑定不会像我预期的那样工作。如果我手动 check/uncheck 复选框,该计算属性将不会更新该值。
这是简化的例子(好像他们的例子不够简单):
这是车把代码。我添加 '{{allAreDone}}' 元素只是为了能够实时查看值:
//...
<section id="main">
{{outlet}}
{{input type="checkbox" id="toggle-all" checked=allAreDone}}
{{allAreDone}}
</section>
//...
这是控制器的 js 片段,但我对其进行了简化,使其不基于另一个属性:
// ...
allAreDone: function(key, value) {
return false
}.property()
// ...
现在,如果我选中该框(即属性 'checked' = true),'allAreDone' 仍会显示 false。如果输入类型是文本,结果会有所不同。如果链接到非计算属性,双向绑定复选框也将起作用,例如:
// ...
allAreDone: false
//will return false if I uncheked the checkbox directly and vice versa
// ...
我只是想确认我对该行为的理解是正确的。为什么它与类型 'text'.
不同谢谢!
您计算的 属性 定义是只读的。没有办法设置值,只能获取它。根据您的情况调整 the guides 中的示例:
allAreDone: function(key, value) {
// setter
if (arguments.length > 1) {
this.set('_allAreDone', value);
}
// getter
return this.get('_allAreDone');
}.property('_allAreDone'),
_allAreDone: false
这使用内部 属性 来存储实际值,但肯定适用于更具体的问题。