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

fix select2 example

Browse source
This commit is contained in:
Leo Horie 2015-06-29 18:59:41 -04:00
parent 919f443099
commit fe7d0b6c9f
1 changed files with 75 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

141
docs/integration.md
View file

@ -7,80 +7,89 @@ It's recommended that you encapsulate integration code in a component or a helpe
The example below shows a simple component that integrates with the [select2 library](http://ivaynberg.github.io/select2/).
```javascript
//Select2 component (assumes both jQuery and Select2 are included in the page)
var Select2 = {
//this view implements select2's `<select>` progressive enhancement mode
view: function(ctrl) {
return m("select", {config: select2.config(ctrl)}, [
ctrl.data.map(function(item) {
return m("option", {value: item.id}, item.name)
// Returns a select box
view: function(ctrl, attrs) {
var selectedId = attrs.value().id;
//Create a Select2 progrssively enhanced SELECT element
return m("select", {config: Select2.config(attrs)}, [
attrs.data.map(function(item) {
var args = {value: item.id};
// Set selected option
if(item.id == selectedId) {
args.selected = "selected";
}
return m("option", args, item.name);
})
]);
}
};
/**
Select2 config factory. The params in this doc refer to properties of the `ctrl` argument
@param {Object} data - the data with which to populate the <option> list
@param {number} value - the id of the item in `data` that we want to select
@param {function(Object id)} onchange - the event handler to call when the selection changes.
`id` is the the same as `value`
*/
Select2.config = function(ctrl) {
return function(element, isInitialized) {
var el = $(element);
if (!isInitialized) {
//set up select2 (only if not initialized already)
el.select2()
//this event handler updates the controller when the view changes
.on("change", function(e) {
//integrate with the auto-redrawing system...
m.startComputation();
//...so that Mithril autoredraws the view after calling the controller callback
if (typeof ctrl.onchange == "function") ctrl.onchange(el.select2("val"));
m.endComputation();
//end integration
});
}
//update the view with the latest controller value
el.select2("val", ctrl.value);
}
}
//end component
//usage
var Dashboard = {
controller: function() {
//list of users to show
var data = [{id: 1, name: "John"}, {id: 2, name: "Mary"}, {id: 3, name: "Jane"}]
return {
data: data,
//select Mary
currentUser: data[1],
changeUser: function(id) {
console.log(id)
}
}
},
/**
Select2 config factory. The params in this doc refer to properties of the `ctrl` argument
@param {Object} data - the data with which to populate the <option> list
@param {prop} value - the prop of the item in `data` that we want to select
@param {function(Object id)} onchange - the event handler to call when the selection changes.
`id` is the the same as `value`
*/
// Note: The config is never run server side.
config: function(ctrl) {
return function(element, isInitialized) {
if(typeof jQuery !== 'undefined' && typeof jQuery.fn.select2 !== 'undefined') {
var el = $(element);
if (!isInitialized) {
el.select2()
.on("change", function(e) {
var id = el.select2("val");
m.startComputation();
//Set the value to the selected option
ctrl.data.map(function(d){
if(d.id == id) {
ctrl.value(d);
}
});
view: function(ctrl) {
return m("div", [
m("label", "User:"),
m.component(Select2, {data: ctrl.data, value: ctrl.currentUser.id, onchange: ctrl.changeUser})
]);
if (typeof ctrl.onchange == "function"){
ctrl.onchange(el.select2("val"));
}
m.endComputation();
});
}
el.val(ctrl.value().id).trigger("change");
} else {
console.warn('ERROR: You need jquery and Select2 in the page');
}
};
}
};
var Dashboard = {
controller: function() {
var ctrl = this,
//list of users to show
data = [
{id: 1, name: "John"},
{id: 2, name: "Mary"},
{id: 3, name: "Seniqua"}
];
ctrl.data = data;
// Has to use a prop for the current user
ctrl.currentUser = m.prop(data[1]);
ctrl.changeUser = function(id) {
console.log(id);
};
},
view: function(ctrl) {
return m("div", [
m("label", "User:"),
m.component(Select2, {
data: ctrl.data,
value: ctrl.currentUser,
onchange: ctrl.changeUser
})
]);
}
};
m.mount(document.body, Dashboard);
```