ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-01 00:45:41 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[API] Sketch in view instantiation

Browse Source
This commit is contained in:
Victor Woeltjen 2016-05-27 15:49:16 -07:00
parent 7ece5897e8
commit 55b531bdeb
2 changed files with 59 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tutorials/todo/todo-task.html
View File

@ -1,5 +1,5 @@
<li>
<input type="checkbox">
<input type="checkbox" class="example-task-checked">
<span class="example-task-description">
</span>
</li>

73
tutorials/todo/todo.js
View File

@ -20,24 +20,67 @@ define([
});
todoType.view(mct.regions.main, function (domainObject) {
var view = new mct.View();
var view = new mct.View({
state: function () {
return {
filter: "all"
};
},
elements: $.bind(null, todoTemplate),
initialize: function (elements, render) {
var $els = $(elements);
var $buttons = {
all: $els.find('.example-todo-button-all'),
incomplete: $els.find('.example-todo-button-incomplete'),
complete: $els.find('.example-todo-button-complete')
};
Object.keys($buttons).forEach(function (k) {
$buttons[k].on('click', function () {
state.filter = k;
render();
});
});
},
render: function (elements, domainObject, state) {
var $els = $(elements);
var tasks = domainObject.getModel().tasks;
var $message = $els.find('.example-message');
var $list = $els.find('example-todo-task-list');
var $buttons = {
all: $els.find('.example-todo-button-all'),
incomplete: $els.find('.example-todo-button-incomplete'),
complete: $els.find('.example-todo-button-complete')
};
var filters = {
all: function (task) {
return true;
},
incomplete: function (task) {
return !task.completed;
},
complete: function (task) {
return task.completed;
}
};
function render() {
var domainObject = view.model();
var $els = $(view.elements());
var tasks = domainObject.getModel().tasks;
var $message = $els.find('.example-message');
var $buttons = {
all: $els.find('.example-todo-button-all'),
incomplete: $els.find('.example-todo-button-incomplete'),
complete: $els.find('.example-todo-button-complete')
};
Object.keys($buttons).forEach(function (k) {
$buttons[k].toggleClass('selected', state.filter === k);
});
$message.toggle(tasks.length < 1);
}
tasks = tasks.filter(filters[state.filter]);
view.elements($(todoTemplate));
view.on('model', render);
$list.empty();
tasks.forEach(function (task) {
var $taskEls = $(taskTemplate);
$taskEls.find('.example-task-checked')
.prop('checked', task.completed);
$taskEls.find('.example-task-description')
.text(task.description);
});
$message.toggle(tasks.length < 1);
}
});
view.model(domainObject);
return view;
});