已檢查狀態的復選框綁定在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}}
>