输入类型='复选框'双向绑定不起作用?

时间:2015-01-08 22:36:44

标签: ember.js

刚开始学习ember.js,目前正在从他们的指南中学习TODO MVC。我现在正迈出这一步:http://emberjs.com/guides/getting-started/show-when-all-todos-are-complete/

我注意到如果我将“checked”属性挂钩到计算属性,则双向绑定不会像我预期的那样工作。如果我手动选中/取消选中该复选框,那个计算属性将不会更新该值。

以下是简化示例(好像他们的示例不够简单):

这是车把代码。我只添加了“{{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'类型不同。

谢谢!

1 个答案:

答案 0 :(得分:0)

您的计算属性定义是只读的。没有办法设置值,只能得到它。将the guides中的示例与您的情况相匹配:

allAreDone: function(key, value) {
  // setter
  if (arguments.length > 1) {
    this.set('_allAreDone', value);
  }

  // getter
  return this.get('_allAreDone');
}.property('_allAreDone'),

_allAreDone: false

这使用内部属性来存储实际值,但肯定会出现更具问题特性的内容。