Ember复选框绑定问题求助：新手的绑定实现疑问及代码咨询

嘿，作为Ember新手碰到这种绑定问题太正常了，我来帮你梳理下现有代码里的问题，再给出能正常工作的修复方案：

现有代码的核心问题 #

• 复选框的checked绑定到了this.checkCompleteToday，但你没定义对应的逻辑来判断「今日日期是否在completedDates数组里」，所以复选框状态根本没法和实际数据同步
• 点击事件只处理了「勾选添加日期」的情况，完全没考虑用户取消勾选时需要移除日期的场景
• 虽然用了pushObject操作数组，但没有处理异步保存失败的情况，容易出现静默错误

修复后的完整代码示例 #

1. 先给Menu模型/对应上下文添加计算属性，判断今日是否已完成 #

如果是在组件里处理，就把这个计算属性加到组件里；如果是在控制器里，就加到控制器中：

import { computed } from '@ember/object';

// ... 你的其他代码

checkCompleteToday: computed('completedDates.[]', function() {
  const today = new Date().toISOString().slice(0, 10);
  return this.get('completedDates').includes(today);
})

2. 修改点击事件，同时支持勾选和取消操作 #

把原来的CompletedToday方法改成支持切换的逻辑：

toggleCompletedToday(id) {
  const today = new Date().toISOString().slice(0, 10);
  
  this.get('DS').findRecord('menu', id).then((menuRecord) => {
    const completedDates = menuRecord.get('completedDates');
    
    if (completedDates.includes(today)) {
      // 取消勾选：从数组里移除今日日期
      completedDates.removeObject(today);
    } else {
      // 勾选：往数组里添加今日日期
      completedDates.pushObject(today);
    }
    
    return menuRecord.save();
  }).catch((error) => {
    // 别忘了处理保存失败的情况，比如给用户提示
    console.error('菜单记录保存失败:', error);
  });
}

3. 更新HBS模板，修正绑定和循环变量 #

注意循环里要给每个菜单项起别名，避免上下文混淆：

{{#each menu as |menuItem|}} 
  {{input 
    type="checkbox" 
    checked=menuItem.checkCompleteToday 
    click=(action "toggleCompletedToday" menuItem.id)
  }} 
{{/each}}

额外注意事项 #

• 确保你的Menu模型里completedDates属性定义正确，比如：

// app/models/menu.js
import Model, { attr } from '@ember-data/model';

export default class MenuModel extends Model {
  @attr('array') completedDates;
  // 其他模型属性...
}

• 如果是在组件中遍历菜单，建议把单个菜单项作为子组件传入，在子组件里定义checkCompleteToday计算属性，这样上下文更清晰
• Ember Data的数组属性默认是MutableArray，所以pushObject和removeObject都是可用的，不用额外转换数组类型

内容的提问来源于stack exchange，提问作者jufu233 Li