1. execute scripts when page loading:
ko.bindingHandlers.select2 = {
init: function(element, valueAccessor, allBindingsAccessor) {
var options = ko.toJS(valueAccessor()) || {};
var allBindings = allBindingsAccessor();
var lookupKey = allBindings.lookupKey;
setTimeout(function() {
$(element).select2(options);
}, 0);
if (lookupKey) {
var value = ko.utils.unwrapObservable(allBindings.value);
$(element).select2('data', ko.utils.arrayFirst(options.data.results, function(item) {
return item[lookupKey] === value;
}));
}
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).select2('destroy');
});
},
update: function(element) {
$(element).trigger('change');
}
};
2. page html tag, Ex:
<select id="form_input1_orientation"></select>
3. data binding :
$("#form_input1_orientation").attr("data-bind",
"options: orientationCategories, optionsValue: 'Id', optionsText: 'Name', selectedOptions: install().orientation_1, select2: {}");
4. view modal:
var orientationCategoriesData = [
{Id: "north", Name: "正北"},
{Id: "northeast", Name: "东北"},
{Id: "northwest", Name: "西北"},
{Id: "east", Name: "正东"},
{Id: "southeast", Name: "东南"},
{Id: "south", Name: "正南"},
{Id: "southwest", Name: "西南"},
{Id: "west", Name: "正西"}
]
self.orientationCategories = ko.observableArray(orientationCategoriesData);
self.orientation_1 = ko.observable(["east"]);
enjoy.