Develop Reference

Creating advanced KnockOut binding handler for google.visualization.datatable

Thanks to this tutorial I managed to create a KnockOut binding handler for Google's DataTable.
This is my binding handler, so far:
ko.bindingHandlers.dataTable = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var table = new google.visualization.Table(element);
ko.utils.domData.set(element, "dataTable", table);
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var value = ko.unwrap(valueAccessor());
// Get options:
var options = allBindings.get("tableOptions") || {};
// Default options:
options.width = options.width || "200px";
options.height = options.height || "200px";
options.showRowNumber = options.showRowNumber || false;
// Get events:
var onSelected = allBindings.get("select") || false;
if (onSelected) {
$(element).on("select", function(event, ui) {
valueAccessor()(ui.value);
});
}
var table = ko.utils.domData.get(element, "dataTable");
table.draw(value, options);
}
};
This is my HTML part:
<div data-bind="dataTable: $root.getData(), tableOptions: {width: '100%',height: '200px', 'allowHtml': true, 'cssClassNames': {'selectedTableRow': 'orange-background'} }"></div>
So far I get a table with fixed headers which works just fine.
Now I want to extent to binding handler to react on the 'select row' event.
I tried this using the // Get events section in my handler but this is not working.
In my HTML I add select: $root.selectedRow(),
In my function selectedRow() I put a console.log("In selectedRow"). When I load the page I see selectedRow is called for every row, but when I click on a row it is not called.
The row its background is changed to orange, so Google is adding the selectedTableRow class.
How to wrap/bind to the select event?

The main thing that's going wrong is, if I'm not mistaken, the way you're trying to attach your event listener.
Your $(element).on("select", onSelect) is not how the library you're using attaches event listeners. In the documentation you can see that you actually need to use: google.visualization.events.addListener(table, 'select', selectHandler);
Additionally, it's better to attach the event listener in the init method. update is called whenever your data changes, so it might add multiple event listeners.
Here's a working example of your code:
google.charts.load('current', {
'packages': ['table']
});
google.charts.setOnLoadCallback(function() {
ko.bindingHandlers.dataTable = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var table = new google.visualization.Table(element);
ko.utils.domData.set(element, "dataTable", table);
// Get events:
var onSelected = allBindings.get("select") || false;
if (onSelected) {
google.visualization.events.addListener(table, 'select', function() {
// TODO: null/undefined/multiple selection checks
var data = valueAccessor();
var row = table.getSelection()[0].row;
onSelected(data.getValue(row, 1)); // Sends salary of clicked row
});
}
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var value = ko.unwrap(valueAccessor());
// Get options:
var options = allBindings.get("tableOptions") || {};
// Default options:
options.width = options.width || "200px";
options.height = options.height || "200px";
options.showRowNumber = options.showRowNumber || false;
var table = ko.utils.domData.get(element, "dataTable");
table.draw(value, options);
}
};
ko.applyBindings({
onSelect: function(value) {
alert(value);
},
getData: function() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {
v: 10000,
f: '$10,000'
},
true
],
['Jim', {
v: 8000,
f: '$8,000'
},
false
],
['Alice', {
v: 12500,
f: '$12,500'
},
true
],
['Bob', {
v: 7000,
f: '$7,000'
},
true
]
]);
return data;
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div data-bind="dataTable: getData(), tableOptions: {width: '100%',height: '200px', 'allowHtml': true, 'cssClassNames': {'selectedTableRow': 'orange-background'} }, select: onSelect"></div>

Allow user to self define the selected value in a select using Select2 and Knockout

Select2 allows to improve standard <select> by applying on some style and feature.
I have to display Select2 styled dropdown list, custom binded with Knockout.
It is a phone number list, and user could add some entries.
I want it to be editable.
The user should be able to select an entry or type a new one wich can be used in the application (binded with manager.selectedPhoneNumber)
So, in the HTML:
<body>
<select id="list" data-bind="
options: manager.getMyPhoneNumbers(),
optionsValue: 'id',
optionsText: 'text',
customBinding_phoneNumbersEditableList: manager.selectedPhoneNumber
">
</select>
</body>
And in Javascript:
ko.bindingHandlers.customBinding_phoneNumbersEditableList = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
// initialize select2 with binded element
$(element).select2({
//createSearchChoice: function (term, data) {
// if ($(data).filter(function () {
// return this.text.localeCompare(term) === 0;
// }).length === 0) {
// return {
// id: term,
// text: term
// };
// }
//},
formatResult: function (item) {
return buildSomePrettyString();
},
formatSelection: function (item) {
return buildSomePrettyString();
},
sortResults: function (results, container, query) {
return results;
}
});
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { }
};
Uncomment the function createSearchCoice does not work. It causes an exception Error: Option 'createSearchChoice' is not allowed for Select2 when attached to a <select> element.
Someone could help me ?

Make slider steps specific values

I have a slider which has min 1, max 24 and steps of 1. Is it possible I can make the steps as 1, 2, 3, 4, 12, 18, 24? That's all the values that will be shown when the slider changes left or right.
<input id="ex1" data-slider-id="ex1Slider" type="text" data-bind="sliderValue: {value: loanperiod, min:0, max: 24, step: 1, formatter:formatter1}, event: { change: $root.getInvestmentDetailsForBorrower }, valueUpdate: 'afterkeydown' " style="display: none;">
Slider has knockout.js binding.
If needed then I am adding the slider binding here
// Custom binding for slider value
(function ($) {
ko.bindingHandlers.sliderValue = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var params = valueAccessor();
// Check whether the value observable is either placed directly or in the paramaters object.
if (!(ko.isObservable(params) || params['value']))
throw "You need to define an observable value for the sliderValue. Either pass the observable directly or as the 'value' field in the parameters.";
// Identify the value and initialize the slider
var valueObservable;
if (ko.isObservable(params)) {
valueObservable = params;
$(element).slider({value: ko.unwrap(params)});
}
else {
valueObservable = params['value'];
if (!Array.isArray(valueObservable)) {
// Replace the 'value' field in the options object with the actual value
params['value'] = ko.unwrap(valueObservable);
$(element).slider(params);
}
else {
valueObservable = [params['value'][0], params['value'][1]];
params['value'][0] = ko.unwrap(valueObservable[0]);
params['value'][1] = ko.unwrap(valueObservable[1]);
$(element).slider(params);
}
}
// Make sure we update the observable when changing the slider value
$(element).on('slide', function (ev) {
if (!Array.isArray(valueObservable)) {
valueObservable(ev.value);
}
else {
valueObservable[0](ev.value[0]);
valueObservable[1](ev.value[1]);
}
}).on('change', function (ev) {
if (!Array.isArray(valueObservable)) {
valueObservable(ev.value.newValue)
}
else {
valueObservable[0](ev.value.newValue[0]);
valueObservable[1](ev.value.newValue[1]);
}
});
// Clean up
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).slider('destroy');
$(element).off('slide');
});
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var modelValue = valueAccessor();
var valueObservable;
if (ko.isObservable(modelValue))
valueObservable = modelValue;
else
valueObservable = modelValue['value'];
if (!Array.isArray(valueObservable)) {
$(element).slider('setValue', parseFloat(valueObservable()));
}
else {
$(element).slider('setValue', [parseFloat(valueObservable[0]()),parseFloat(valueObservable[1]())]);
}
}
};
})(jQuery);
// Custom binding for slider
(function ($) {
ko.bindingHandlers.slider = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = allBindingsAccessor().sliderOptions || {};
$(element).slider(options);
ko.utils.registerEventHandler(element, "slidechange", function (event, ui) {
var observable = valueAccessor();
observable(ui.value);
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).slider("destroy");
});
ko.utils.registerEventHandler(element, "slide", function (event, ui) {
var observable = valueAccessor();
observable(ui.value);
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (isNaN(value)) value = 0;
$(element).slider("value", value);
}
};
})(jQuery);

I think you just want to have a function that takes the raw slider value and translates it to your custom values. Then use the result of that wherever you need the value.
vm = {
sliderValues: [1, 2, 3, 4, 12, 18, 24],
rawSliderValue: ko.observable(1),
sliderValue: ko.pureComputed(function() {
return vm.sliderValues[vm.rawSliderValue() - 1];
})
};
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="range" min="1" data-bind="attr {max: sliderValues.length}, value: rawSliderValue, valueUpdate: 'input'" />
<div data-bind="text: sliderValue"></div>

Knockout Binding Handlers undefined error

I have this jsfiddle which shows a table and some users with roles.
I want to have a modal form pop up when some clicks add roles etc.
There seems to be an error on the update property of this ko.bindingHandlers.modal function:
ko.bindingHandlers.modal = {
init: function (element, valueAccessor) {
$(element).modal({ show: false }).on("hidden", function () {
var data = valueAccessor();
if (ko.isWriteableObservable(data))
data(null);
});
return ko.bindingHandlers["with"].init.apply(this, arguments);
},
update: function (element, valueAccessor) {
var data = ko.unwrap(valueAccessor());
$(element).modal( data ? "show" : "hide" );
return ko.bindingHandlers["with"].update.apply(this, arguments); // Error on this line
}
};
I don't why this is happening, I have copied the code from Ryan Niemeyer dev video
Its 34mins in.
It's a Bootstrap modal dialogue, using Knockout JS as the binding library

The with binding does no longer have the update function
From the init function use
ko.applyBindingsToNode(element, { with: valueAccessor() });
Update
ko.bindingHandlers.modal = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
$(element).modal({ show: false }).on("hidden", function () {
var data = valueAccessor();
if (ko.isWriteableObservable(data))
data(null);
});
ko.applyBindingsToNode(element, { with: valueAccessor() }, bindingContext);
return { controlsDescendantBindings: true };
},
update: function (element, valueAccessor) {
var data = ko.unwrap(valueAccessor());
$(element).modal( data ? "show" : "hide" );;
}
};

knockout click event

I have the following code:
<div class="icon-upload" data-bind="click: button('upload') "> Upload </div>
ko.bindingHandlers.button = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext)
{
//alert('works');
console.log(element);
}
};
But I keep getting a button is not defined error. I'm trying to do an on('click') event with a parameter to determine latter what binding to initialize.
For example, when clicking on button('upload') I want to initialize the following binding
ko.bindingHandlers.image = {
init: function (element, valueAccessor, allBindingsAccessor, context)
{
var value = ko.utils.unwrapObservable(valueAccessor()),
$element = $(element);
console.log($element)
$element.html(value);
/*$element.pluploadQueue({
runtime: 'gears, browserplus, html5, flash, html4',
max_file_size: '10mb',
max_file_count: 10,
chunk_size: '1mb',
unique_names: true,
multiple_queues: true,
drop_element: true,
dragdrop: true,
filters : [
{title : "Image files", extensions : "jpg,gif,png"}
]
});*/
}
};
Do I must wrap the click code in a ViewModel = function() { like in
http://jsfiddle.net/jearles/xSKyR/
http://jsfiddle.net/FpSWb/ ?
Can't I do it the way I'm trying to do it?

You doing it wrong. You should create custom binding button which will be triggered on click event.
ko.bindingHandlers.button = {
init: function (element) {
$(element).click(function() {
// Your logic
});
}
update: function(element, valueAccessor, allBindingsAccessor) {
switch(ko.utils.unwrapObservable(valueAccessor())) {
case 'upload': ...
}
}
}
In view
<div class="icon-upload" data-bind="button: 'upload'"> Upload </div>