ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-18 20:57:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[API] Use subclass style

Browse Source
This commit is contained in:
Victor Woeltjen 2016-05-27 17:08:04 -07:00
parent 86ac80ddbd
commit 4ca2f51d5e
2 changed files with 79 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/View.js
View File

@ -1,35 +1,19 @@
define(['EventEmitter'], function (EventEmitter) { define(['EventEmitter'], function (EventEmitter) {
function View(definition) { function View() {
var self = this;
var state = definition.state ? definition.state() : {};
function render() {
if (definition.render) {
definition.render(self.elements(), self.model(), state);
}
}
EventEmitter.call(this); EventEmitter.call(this);
this.state = { elements: [], model: undefined };
if (definition.elements) {
this.elements(definition.elements());
}
if (definition.initialize) {
definition.initialize(this.elements(), state, render);
}
this.on('model', render);
} }
View.prototype = Object.create(EventEmitter.prototype); View.prototype = Object.create(EventEmitter.prototype);
['elements', 'model'].forEach(function (method) { ['elements', 'model'].forEach(function (method) {
View.prototype[method] = function (value) { View.prototype[method] = function (value) {
this.viewState =
this.viewState || { elements: [], model: undefined };
if (arguments.length > 0) { if (arguments.length > 0) {
this.state[method] = value; this.viewState[method] = value;
this.emit(method, value); this.emit(method, value);
} }
return this.state[method]; return this.viewState[method];
} }
}); });

142
tutorials/todo/todo.js
View File

@ -21,78 +21,84 @@ define([
creatable: true creatable: true
}); });
todoType.view(mct.regions.main, function (domainObject) { function TodoView(domainObject) {
var view = new mct.View({ mct.View.apply(this);
state: function () { this.filterValue = "all";
return { this.elements($(todoTemplate));
filter: "all"
}; var $els = $(this.elements());
this.$buttons = {
all: $els.find('.example-todo-button-all'),
incomplete: $els.find('.example-todo-button-incomplete'),
complete: $els.find('.example-todo-button-complete')
};
this.initialize();
this.on('model', this.render.bind(this));
this.model(domainObject);
}
TodoView.prototype = Object.create(mct.View.prototype);
TodoView.prototype.setFilter = function (value) {
this.filterValue = value;
this.render();
};
TodoView.prototype.initialize = function () {
Object.keys(this.$buttons).forEach(function (k) {
this.$buttons[k].on('click', this.setFilter.bind(this, k));
}, this);
};
TodoView.prototype.render = function () {
var $els = $(this.elements());
var domainObject = this.model();
var tasks = domainObject.getModel().tasks;
var $message = $els.find('.example-message');
var $list = $els.find('.example-todo-task-list');
var $buttons = this.$buttons;
var filters = {
all: function () {
return true;
}, },
elements: $.bind(null, todoTemplate), incomplete: function (task) {
initialize: function (elements, state, render) { return !task.completed;
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) { complete: function (task) {
var $els = $(elements); return task.completed;
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 () {
return true;
},
incomplete: function (task) {
return !task.completed;
},
complete: function (task) {
return task.completed;
}
};
Object.keys($buttons).forEach(function (k) {
$buttons[k].toggleClass('selected', state.filter === k);
});
tasks = tasks.filter(filters[state.filter]);
$list.empty();
tasks.forEach(function (task, index) {
var $taskEls = $(taskTemplate);
var $checkbox = $taskEls.find('.example-task-checked');
$checkbox.prop('checked', task.completed);
$taskEls.find('.example-task-description')
.text(task.description);
$checkbox.on('change', function () {
var checked = !!$checkbox.prop('checked');
mct.verbs.mutate(domainObject, function (model) {
model.tasks[index].completed = checked;
});
});
$list.append($taskEls);
});
$message.toggle(tasks.length < 1);
} }
};
var filterValue = this.filterValue;
Object.keys($buttons).forEach(function (k) {
$buttons[k].toggleClass('selected', filterValue === k);
}); });
view.model(domainObject); tasks = tasks.filter(filters[filterValue]);
return view;
$list.empty();
tasks.forEach(function (task, index) {
var $taskEls = $(taskTemplate);
var $checkbox = $taskEls.find('.example-task-checked');
$checkbox.prop('checked', task.completed);
$taskEls.find('.example-task-description')
.text(task.description);
$checkbox.on('change', function () {
var checked = !!$checkbox.prop('checked');
mct.verbs.mutate(domainObject, function (model) {
model.tasks[index].completed = checked;
});
});
$list.append($taskEls);
});
$message.toggle(tasks.length < 1);
};
todoType.view(mct.regions.main, function (domainObject) {
return new TodoView(domainObject);
}); });
mct.type('example.todo', todoType); mct.type('example.todo', todoType);