ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-14 05:08:15 +00:00
Code Issues Actions 5 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
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];
} }
}); });

68
tutorials/todo/todo.js
View File

@ -21,38 +21,43 @@ 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 = {
elements: $.bind(null, todoTemplate),
initialize: function (elements, state, render) {
var $els = $(elements);
var $buttons = {
all: $els.find('.example-todo-button-all'), all: $els.find('.example-todo-button-all'),
incomplete: $els.find('.example-todo-button-incomplete'), incomplete: $els.find('.example-todo-button-incomplete'),
complete: $els.find('.example-todo-button-complete') complete: $els.find('.example-todo-button-complete')
}; };
Object.keys($buttons).forEach(function (k) {
$buttons[k].on('click', function () { this.initialize();
state.filter = k; this.on('model', this.render.bind(this));
render(); this.model(domainObject);
}); }
});
}, TodoView.prototype = Object.create(mct.View.prototype);
render: function (elements, domainObject, state) {
var $els = $(elements); 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 tasks = domainObject.getModel().tasks;
var $message = $els.find('.example-message'); var $message = $els.find('.example-message');
var $list = $els.find('.example-todo-task-list'); var $list = $els.find('.example-todo-task-list');
var $buttons = { var $buttons = this.$buttons;
all: $els.find('.example-todo-button-all'),
incomplete: $els.find('.example-todo-button-incomplete'),
complete: $els.find('.example-todo-button-complete')
};
var filters = { var filters = {
all: function () { all: function () {
return true; return true;
@ -64,11 +69,12 @@ define([
return task.completed; return task.completed;
} }
}; };
var filterValue = this.filterValue;
Object.keys($buttons).forEach(function (k) { Object.keys($buttons).forEach(function (k) {
$buttons[k].toggleClass('selected', state.filter === k); $buttons[k].toggleClass('selected', filterValue === k);
}); });
tasks = tasks.filter(filters[state.filter]); tasks = tasks.filter(filters[filterValue]);
$list.empty(); $list.empty();
tasks.forEach(function (task, index) { tasks.forEach(function (task, index) {
@ -89,10 +95,10 @@ define([
}); });
$message.toggle(tasks.length < 1); $message.toggle(tasks.length < 1);
} };
});
view.model(domainObject); todoType.view(mct.regions.main, function (domainObject) {
return view; return new TodoView(domainObject);
}); });
mct.type('example.todo', todoType); mct.type('example.todo', todoType);