已检查状态的复选框绑定在Chrome中反转

Question

我正在使用Ember v2.5.1和Ember数据v2.6.2，我有一系列嵌套组件来呈现类别的分层树。 最低级别组件categories-tree-node存在关闭操作，该categories-tree-node在categories-select组件的操作中调用toggleAddCategory函数并传递相关类别对象。

它在Safari中按预期工作，但由于某种原因，检查状态在Chrome和FF中反转。 奇怪的是，当复选框被更改时，值本身的已检查状态绑定会在模板中的其他位置正确呈现。

我在这里创建了一个演示 ，如果您尝试检查/取消选中Chrome / FF vs Safari中的框，您应该会看到问题。 是否有一种优先处理这种类型的动作绑定与复选框检查状态的方法？ 我已经读到使用Observers被认为是Ember 2及以上版本中的反模式，当我尝试这个时它也不适用于子类别。

Answer 1

好的，所以你的旋转显示Chrome中的状态没有变化，但在Safari中更改了。

这很可能是Safari中jQuery的一个错误，因为Ember.CheckBox使用jQuery prop方法进行了checked ：

change() {
  set(this, 'checked', this.$().prop('checked'));
}

解决方法是使用复选框作为角括号组件（ 默认情况下具有单向绑定 ），以确保input组件不会更改checked绑定，而是使用传入的闭包操作手动切换选中的陈述自己。

这也与Ember建议的最佳实践一起使用Data Down - Actions Up模式从组件设置父属性。

注意： 您可能希望使用onchange事件而不是onclick 。

子 components/categories-tree-node.hbs

<input type="checkbox"
       checked={{category.checked}} <!-- checked is just passed from above, not set within the component -->
       onchange={{action toggle category}} <!-- onchange calls the passed in action which toggles checked -->
       id={{concat elementId '-' category.slug}}
>

...

父 components/categories-select.js

export default Ember.Component.extend({
  // ...

  actions: {

    toggleAddCategory(category) {
      category.toggleProperty('checked'); // toggle the property yourself

      // ...  
    }

  }
});

如果您的父操作只执行切换而没有其他操作，您可能不需要它，并且可以使用mut帮助程序在components/categories-tree-node.hbs内部切换：

<input type="checkbox"
       checked={{category.checked}} <!-- checked is just passed from above, not set within the component -->
       onchange={{action (mut category.checked) value="target.checked"}} <!-- onchange automatically sets category.checked -->
       id={{concat elementId '-' category.slug}}
>