ddSlick BindingHandler
HTML
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="http://dl.dropbox.com/u/40036711/Scripts/jquery.ddslick.min.js"></script>
<div data-bind="slickIt: slickData"></div>
<button data-bind="click: getData">add data</button>
JavaScript
var ddData = [
{
text: "Facebook",
value: 1,
selected: false,
description: "Description with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
},
{
text: "Twitter",
value: 2,
selected: false,
description: "Description with Twitter",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
},
{
text: "LinkedIn",
value: 3,
selected: true,
description: "Description with LinkedIn",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
},
{
text: "Foursquare",
value: 4,
selected: false,
description: "Description with Foursquare",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
}
];
var viewModel = {
slickData: ko.observableArray([{
text: "Facebook",
value: 1,
selected: false,
description: "Description with Facebook",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
}]),
getData: function() {
ko.mapping.fromJS(ddData, { }, viewModel.slickData);
}
};
ko.bindingHandlers.slickIt = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var _observable = valueAccessor();
var _value = ko.utils.unwrapObservable(_observable);
$(element).ddslick({
data: _value,
selectText: "Select a team member",
...