Question

我在几个月前编写代码，以便在用户点击按钮时显示Ember.Checkbox es的集合。复选框对应于用户能够选择的其他用户的集合。我的模板中有一个简单的#if块，用于在显示以纯文本格式检查哪些用户和允许用户选择或取消选择它们的复选框之间切换。用户界面的UI如下所示：

状态1：显示当前所选用户的名称。 Showing text users

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

所有这些的相关代码：

_subtaskPartial.handlebars：

 <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>

userCheckbox.handlebars：

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

user_checkbox_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'),
});

abstract_subtask_controller.js（_subtaskPartial的相关控制器代码）：

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中的按钮，_subtaskPartial语句和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属性，该属性正常工作，但不管它返回什么，它都不会更改{{{ 1}}。这对我来说真的很混乱，因为我所做的就是删除不同模板中的周围代码。我已经尝试了其他各种方法，但我一直在做'Ember.Checkbox'，因为我无处可去。

有人介意把我推向正确的方向吗？即使这是一个更好的方法，我可以实现一组Checkboxes。

Answer 1

我发现这是一个在祖先dom元素上有一个余烬动作的问题，导致复选框表现得非常奇怪。

要解决此问题，我必须从：

更改祖先动作助手

{{action "editTask" on="click"}}

到此：

{{action "editTask" on="click" preventDefault=false}}

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

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

1 个答案: