Ember.Checkbox не работает должным образом после удаления внешнего оператора #if

0

Я написал код пару месяцев назад, чтобы показать коллекцию Ember.Checkbox когда пользователь нажимает кнопку. Флажки соответствуют коллекции других пользователей, которые пользователь может выбрать. В моем шаблоне есть простой # #if блок, который переключает между показом, какие пользователи проверяются в текстовом виде, и флажками, которые позволяют пользователю выбирать или отменять их. Пользовательский интерфейс выглядит следующим образом:

Состояние 1: отображение имени выбранных пользователей. Изображение 174551

Состояние 2: отображение коллекции флажков для выбора после того, как пользователь нажал кнопку. Изображение 174551

Соответствующий код для всего этого:

_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 и else в моем _subtaskPartial и все должно быть хорошо. Поэтому я сделал это так:

обновлено _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 он вызывает свойство userChecked которое работает нормально, но независимо от того, что оно возвращает, оно не изменяет проверенное состояние Ember.Checkbox. Это действительно сбивает меня с толку, поскольку все, что я делал, - это удаление окружающего кода в другом шаблоне. Я пробовал различные другие подходы, но я продолжаю делать " git stash ", так как меня нет.

Кто-то ум подталкивает меня в правильном направлении? Даже если это лучший способ, я могу реализовать коллекцию флажков.

  • 0
    Не то, чтобы я рекомендовал это, но ради теста вы пытались {{#unless asdfasdfsdfsdf}}checkboxstuff{{/unless}} Я заинтригован идеей, что {{#unless asdfasdfsdfsdf}}checkboxstuff{{/unless}} область действия. Какую версию Ember вы использовали, несколько запросов извлечения для вложенных, если проблемы попали в последние выпуски
  • 0
    Можете ли вы опубликовать скрипку: я не могу повторить сценарий
Показать ещё 4 комментария
Теги:
checkbox
ember.js

1 ответ

0
Лучший ответ

Я узнал, что это была проблема с действием ember над элементом предка dom, в результате чего флажки ведут себя очень странно.

Чтобы исправить эту проблему, мне пришлось изменить помощник действий предка:

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

к этому:

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

Если это происходит с вами, вы можете найти дополнительную информацию об атрибуте preventDefault в этом PR.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню