Я написал код пару месяцев назад, чтобы показать коллекцию Ember.Checkbox
когда пользователь нажимает кнопку. Флажки соответствуют коллекции других пользователей, которые пользователь может выбрать. В моем шаблоне есть простой # #if
блок, который переключает между показом, какие пользователи проверяются в текстовом виде, и флажками, которые позволяют пользователю выбирать или отменять их. Пользовательский интерфейс выглядит следующим образом:
Состояние 1: отображение имени выбранных пользователей.
Состояние 2: отображение коллекции флажков для выбора после того, как пользователь нажал кнопку.
Соответствующий код для всего этого:
_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
", так как меня нет.
Кто-то ум подталкивает меня в правильном направлении? Даже если это лучший способ, я могу реализовать коллекцию флажков.
Я узнал, что это была проблема с действием ember над элементом предка dom, в результате чего флажки ведут себя очень странно.
Чтобы исправить эту проблему, мне пришлось изменить помощник действий предка:
{{action "editTask" on="click"}}
к этому:
{{action "editTask" on="click" preventDefault=false}}
Если это происходит с вами, вы можете найти дополнительную информацию об атрибуте preventDefault в этом PR.
{{#unless asdfasdfsdfsdf}}checkboxstuff{{/unless}}
Я заинтригован идеей, что{{#unless asdfasdfsdfsdf}}checkboxstuff{{/unless}}
область действия. Какую версию Ember вы использовали, несколько запросов извлечения для вложенных, если проблемы попали в последние выпуски