vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix autocompleter example in docs

Browse source
This commit is contained in:
Leo Horie 2014-04-06 22:09:20 -04:00
parent bdd016de3f
commit 232b02a082
3 changed files with 42 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

6
archive/v0.1.3/components.html
View file

@ -126,17 +126,17 @@ autocompleter.controller = function(data, getter) {
this.change = function(value) { this.change = function(value) {
this.value(value); this.value(value);
var data = value === "" ? [] : data.filter(function(item) { var list = value === "" ? [] : data.filter(function(item) {
return this.getter(item).toLowerCase().indexOf(value.toLowerCase()) > -1; return this.getter(item).toLowerCase().indexOf(value.toLowerCase()) > -1;
}, this); }, this);
this.data(data); this.data(list);
}; };
//this method is called when an option is selected. It triggers an `onchange` event //this method is called when an option is selected. It triggers an `onchange` event
this.select = function(value) { this.select = function(value) {
this.value(value); this.value(value);
this.data([]); this.data([]);
if (this.onchange) this.onchange({target: {value: value}}); if (this.onchange) this.onchange({currentTarget: {value: value}});
}; };
} }

BIN
archive/v0.1.3/mithril.min.zip
View file

Binary file not shown.

78
docs/components.md
View file

@ -87,40 +87,40 @@ Applications often reuse rich UI controls that aren't provided out of the box by
var autocompleter = {}; var autocompleter = {};
autocompleter.controller = function(data, getter) { autocompleter.controller = function(data, getter) {
//binding for the text input //binding for the text input
this.value = m.prop(""); this.value = m.prop("");
//store for the list of items //store for the list of items
this.data = m.prop([]); this.data = m.prop([]);
//method to determine what property of a list item to compare the text input's value to //method to determine what property of a list item to compare the text input's value to
this.getter = getter; this.getter = getter;
//this method changes the relevance list depending on what's currently in the text input //this method changes the relevance list depending on what's currently in the text input
this.change = function(value) { this.change = function(value) {
this.value(value); this.value(value);
var data = value === "" ? [] : data.filter(function(item) { var list = value === "" ? [] : data.filter(function(item) {
return this.getter(item).toLowerCase().indexOf(value.toLowerCase()) > -1; return this.getter(item).toLowerCase().indexOf(value.toLowerCase()) > -1;
}, this); }, this);
this.data(data); this.data(list);
}; };
//this method is called when an option is selected. It triggers an `onchange` event //this method is called when an option is selected. It triggers an `onchange` event
this.select = function(value) { this.select = function(value) {
this.value(value); this.value(value);
this.data([]); this.data([]);
if (this.onchange) this.onchange({target: {value: value}}); if (this.onchange) this.onchange({currentTarget: {value: value}});
}; };
} }
autocompleter.view = function(ctrl, options) { autocompleter.view = function(ctrl, options) {
if (options) ctrl.onchange = options.onchange; if (options) ctrl.onchange = options.onchange;
return [ return [
m("input", {oninput: m.withAttr("value", ctrl.change.bind(ctrl)), value: ctrl.value()}), m("input", {oninput: m.withAttr("value", ctrl.change.bind(ctrl)), value: ctrl.value()}),
ctrl.data().map(function(item) { ctrl.data().map(function(item) {
return m("div", {data: ctrl.getter(item), onclick: m.withAttr("data", ctrl.select.bind(ctrl))}, ctrl.getter(item)); return m("div", {data: ctrl.getter(item), onclick: m.withAttr("data", ctrl.select.bind(ctrl))}, ctrl.getter(item));
}) })
]; ];
} }
@ -129,17 +129,17 @@ autocompleter.view = function(ctrl, options) {
var dashboard = {} var dashboard = {}
dashboard.controller = function() { dashboard.controller = function() {
this.names = m.prop([{id: 1, name: "John"}, {id: 2, name: "Bob"}, {id: 2, name: "Mary"}]); this.names = m.prop([{id: 1, name: "John"}, {id: 2, name: "Bob"}, {id: 2, name: "Mary"}]);
this.autocompleter = new autocompleter.controller(this.names(), function(item) { this.autocompleter = new autocompleter.controller(this.names(), function(item) {
return item.name; return item.name;
}); });
}; };
dashboard.view = function(ctrl) { dashboard.view = function(ctrl) {
//assuming there's an element w/ id = "example" somewhere on the page //assuming there's an element w/ id = "example" somewhere on the page
return m("#example", [ return m("#example", [
new autocompleter.view(ctrl.autocompleter, {onchange: m.withAttr("value", console.log)}), new autocompleter.view(ctrl.autocompleter, {onchange: m.withAttr("value", console.log)}),
]); ]);
}; };