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) {
function View(definition) {
var self = this;
var state = definition.state ? definition.state() : {};
function render() {
if (definition.render) {
definition.render(self.elements(), self.model(), state);
}
}
function View() {
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);
['elements', 'model'].forEach(function (method) {
View.prototype[method] = function (value) {
this.viewState =
this.viewState || { elements: [], model: undefined };
if (arguments.length > 0) {
this.state[method] = value;
this.viewState[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
});
todoType.view(mct.regions.main, function (domainObject) {
var view = new mct.View({
state: function () {
return {
filter: "all"
};
},
elements: $.bind(null, todoTemplate),
initialize: function (elements, state, render) {
var $els = $(elements);
var $buttons = {
function TodoView(domainObject) {
mct.View.apply(this);
this.filterValue = "all";
this.elements($(todoTemplate));
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')
};
Object.keys($buttons).forEach(function (k) {
$buttons[k].on('click', function () {
state.filter = k;
render();
});
});
},
render: function (elements, domainObject, state) {
var $els = $(elements);
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 = {
all: $els.find('.example-todo-button-all'),
incomplete: $els.find('.example-todo-button-incomplete'),
complete: $els.find('.example-todo-button-complete')
};
var $buttons = this.$buttons;
var filters = {
all: function () {
return true;
@ -64,11 +69,12 @@ define([
return task.completed;
}
};
var filterValue = this.filterValue;
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();
tasks.forEach(function (task, index) {
@ -89,10 +95,10 @@ define([
});
$message.toggle(tasks.length < 1);
}
});
view.model(domainObject);
return view;
};
todoType.view(mct.regions.main, function (domainObject) {
return new TodoView(domainObject);
});
mct.type('example.todo', todoType);