Javascript 删除外部if语句后，Ember.Checkbox未按预期工作

几个月前，我编写了代码，在用户单击按钮时显示一组余烬复选框。复选框对应于用户能够选择的其他用户的集合。在我的模板中有一个简单的if块，它在显示以纯文本形式选中的用户和允许用户选择或取消选择的复选框之间切换。此应用程序的UI如下所示：

状态1：显示当前选定用户的名称。

状态2：显示用户单击按钮后要选择的复选框集合。

所有这些的相关代码：

_子任务部分把手：

 <div class="form-group col-lg-10">
  {{view Ember.TextField valueBinding="title" placeholder="Title" required="true" class="form-control"}}
</div>
<div class="form-group col-lg-10">
  <label for="subtask-due-date" class="col-lg-2 control-label">Due Date:</label>
  <div id="new-task-date" class="datepicker input-append date col-lg-2" data-date-format="mm/dd/yyyy"> 
    {{view Ember.TextField valueBinding="date" class="form-control" size="40"}}
    <span class="add-on"><i class="icon-th"></i></span>
  </div>
  <label for="subtask-users" class="col-lg-3 control-label">Assigned to:</label>
  <button type="button" class="btn btn-default btn-sm" {{action toggleUserSelect}} {{bind-attr class="isShowingUsers:hide"}}><span class="glyphicon glyphicon-user">Select</button>
  {{#if isShowingUsers}}
  <div class="select-users-container">
    <ul id="select-users-list">
      {{#each student in controllers.requiredTasks.selectableStudents}}
        {{render "userCheckbox" student}}
      {{/each}}
    </ul>
  </div>
  {{else}}
    {{#each student in controller.content.students}}
      {{student.fullName}}
    {{/each}}
  {{/if}}
</div>

{{view Ember.Checkbox checkedBinding="userChecked" class="user-select-checkbox"}}
{{fullName}}

用户\u复选框\u controller.js

Sis.UserCheckboxController = Ember.ObjectController.extend({
  userChecked: function(key, value) {
    var content = this.get('content'),
        students = this.get('target.content.students');

    // If the checkbox is checked then add the student (content) to the subtasks
    // associated students
    if (value === true) {
      students.addObject(content);
    } else if (value === false) {
      // Is the checkbox gets unchecked then remove the student from the subtask
      students.removeObject(content);
    }

    // The checkbox should be checked if the subtasks associated students 
    // includes this student. 
    return students.any(function(student, idx){
      return student.id === content.id;
    });
  }.property('target.content.students'),
});

抽象子任务\u controller.js子任务部分的相关控制器代码：

Sis.AbstractSubtaskController = Ember.ObjectController.extend({
  needs: ['requiredTasks'],
  isShowingUsers: false,
  date: function(key, value) {
    if (value !== undefined) {
      this.set('content.dueDate', moment(value).toDate());
    }
    if (this.get('content.dueDate')) {
      return moment(this.get('content.dueDate')).format('L');
    } else {
      var newDate = new Date();
      this.set('content.dueDate', newDate);
      return moment(newDate).format('L');
    }
  }.property('content.dueDate'),
  userCanSave: function() {
    var hasAssignedStudents = this.get('content.students.length') >= 1;
    var hasTitle = this.get('content.title') !== undefined && this.get('content.title') !== '';
    return hasAssignedStudents && hasTitle;
  }.property('content.students.length', 'content.title'),
  actions: {
    toggleUserSelect: function() {
      var controller = this;
      controller.toggleProperty('isShowingUsers');
      if (controller.get('isShowingUsers')) {
        Ember.run.next(this, function() {
          // Setup the click handler to set isShowingUsers to false
          $('body').one('click', function() {
            controller.toggleProperty('isShowingUsers');
          });
          // Make sure the select-users-container doesn't trigger the above event
          $(".select-users-container").click(function(e) {
            e.stopPropagation();
            return true;
          });
        });
      }
    },
  }
});

现在所有这些都按预期工作，没有问题。我的设计师决定我们不需要“选择”按钮，因为这只是一个额外的步骤，实际上并不需要，所以他们让我把它拿出来。我本以为这真的很简单。我所要做的就是删除我的子任务部分中的按钮、if语句和else子句，一切都应该正常。所以我就这样做了：

更新的_subtaskPartial.js：

{{!-- above code removed for brevity --}}
<label for="subtask-users" class="col-lg-3 control-label">Assigned to:</label>
<div class="select-users-container">
  <ul id="select-users-list">
    {{#each student in controllers.requiredTasks.selectableStudents}}
      {{render "userCheckbox" student}}
    {{/each}}
  </ul>
</div>

做上面的事情不知怎么的破坏了一些东西，我已经和它斗争了几个小时了。我不确定根本的问题是什么，但每当我单击其中一个复选框时，它就会调用正常工作的userChecked属性，但不管它返回什么，它都不会更改Ember.Checkbox的选中状态。这对我来说真的很困惑，因为我所做的只是在不同的模板中删除周围的代码。我尝试过各种其他方法，但我一直在做“git隐藏”，因为我找不到任何地方

---

有人介意把我推向正确的方向吗？即使这是实现复选框集合的更好方法

我发现这是对祖先dom元素执行余烬操作的问题，导致复选框的行为异常

要解决此问题，我必须从以下位置更改祖先操作助手：

{{action editTask on=click}

为此：

{{action editTask on=click prevent default=false}

---

如果发生这种情况，您可以在中找到有关preventDefault属性的更多信息

我并不推荐这样做，但为了测试起见，您是否尝试过{{{除非asdfasdfsdf}}}checkboxstuff{{{/除非}}我对if改变范围的想法很感兴趣。您使用的是什么版本的Ember，在最新版本中出现了一些针对nested if的拉取请求扫描您发布了一篇文章：我无法复制scenario@kingpin2k我尝试将代码包装在一个除非中，但它没有改变任何东西。我现在会试着把一把小提琴放在一起，但我认为主销是对的，这是一个嵌套范围的问题。我们看看我能不能复制它。我好像连一把有用的小提琴都放不起来。这是一个嵌套非常深的控制器/把手模板，即使我再花一个小时尝试获取有用的东西，我也不确定它是否会复制我的问题，因为可能是嵌套导致了问题。不确定在这里做什么。。。任何其他调试技巧都将不胜感激。而这变得更加奇怪。当我按下Mac的“命令”键时，复选框会按预期工作。在我按下某个键之前，怎么可能导致复选框不改变值/响应？？