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>
Related
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>
I have a Datatable that takes data from Knockout ViewModel array. New rows are added fine when I push new objects to the array, but when an object in that array is changed, the row isn't being updated.
The relecent ViewModel code:
.....
self.Products = ko.observableArray();
.....
Sample data (e.g result of ko.toJSON(VM.Products()) ):
"[
{"Price":"114.28","Name":"Pearls","Description":"Little and big","Quantity":3},
{"Price":"117.55","Name":"Silver","Description":"Sliver Coins","Quantity":2},
{"Price":"166.09","Name":"Phone","Description":"Nokia","Quantity":2},
{"Price":"169.36","Name":"Wood","Description":"Northen forest wood","Quantity":1}
]"
Then Datatable code:
var CartDt = $("#PurchasedPrdTbl").DataTable({
pageLength: 5,
aoData: ko.toJSON(VM.Products()),
columns: [
{ "title": 'Price' },
{ "title": 'Name' },
{ "title": 'Description' },
{ "title": 'Quantity' },
{
"className": 'remove-details-control',
"orderable": false,
"data": null,
"defaultContent": '',
"title": "Sell Me!",
"fnRender": function (oObj) {
return oObj.aData;
}
}
]
});
I'v tried ajax.reload but it didn't helped.
Any ideas would be great, thanks.
EDIT:
I'm trying fnUpdate (source) like this:
CartDt.fnUpdate([{"Price":"114.28","Name":"Pearls","Description":"Little and big","Quantity":3}],1);
But I get this:
Uncaught TypeError: undefined is not a function
This is because the html that is bound to your knockout observable array is mangled when datatables is initialized... The html is copied and reformatted to be "datatables" after initialization. so the elements that you view after datatables initialization are not the same elements that knockout has bound to. I have created a custom binding to use datatables with knockout. it is dependent upon a fork of knockout which adds before render all and after render all events. I have created a pull request with the knockout git hub repository. If the below solution helps you please leave a comment on the pull request to get it merged into knockout 3.4... thanks.
fiddle of working solution
my pull request
ko.bindingHandlers.DataTablesForEach = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var nodes = Array.prototype.slice.call(element.childNodes, 0);
ko.utils.arrayForEach(nodes, function (node) {
if (node && node.nodeType !== 1) {
node.parentNode.removeChild(node);
}
});
return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var value = ko.unwrap(valueAccessor()),
key = "DataTablesForEach_Initialized";
var newValue = function () {
return {
data: value.data || value,
beforeRenderAll: function (el, index, data) {
if (ko.utils.domData.get(element, key)) {
$(element).closest('table').DataTable().clear();
$(element).closest('table').DataTable().destroy();
}
},
afterRenderAll: function (el, index, data) {
$(element).closest('table').DataTable(value.options);
}
};
};
ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, bindingContext);
//if we have not previously marked this as initialized and there is currently items in the array, then cache on the element that it has been initialized
if (!ko.utils.domData.get(element, key) && (value.data || value.length)) {
ko.utils.domData.set(element, key, true);
}
return { controlsDescendantBindings: true };
}
};
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" );;
}
};
A quick explanation:
I am working on a backbone app that integrated with Fullcalendar JS. When creating or editing an event, you can click on the calendar and a modal will popup asking for the info. The problem is when the modal pops up I need to use "this.model" to .get() info about the current event or .set() info about a new event. I keep getting the error:
Uncaught TypeError: Cannot call method 'get' of undefined
Uncaught TypeError: Cannot call method 'set' of undefined
My question:
What is the proper method to set the current model of a clicked view?
Here is some relevant code:
Model & collection:
var Event = Backbone.Model.extend({
methodToURL: {
'create': addDayURL,
'update': addDayURL,
//'delete': '/user/remove'
},
sync: function(method, model, options) {
options = options || {};
options.url = model.methodToURL[method.toLowerCase()];
Backbone.sync(method, model, options);
}
});
var Events = Backbone.Collection.extend({
model: Event,
url: allDaysURL
});
Main View
var EventsView = Backbone.View.extend({
events: {
'click #add_track' : "addTrack",
'click th.fc-widget-header:not(.fc-first)' : 'updateTrack',
'click .fc-button-next' : 'switchTracks',
'click .fc-button-prev' : 'switchTracks'
},
initialize: function(){
_.bindAll(this);
this.collection.on('reset', this.addAll);
this.collection.bind('add', this.addOne);
this.collection.bind('change', this.change);
this.collection.bind('destroy', this.destroy);
console.log(this.collection.toJSON());
console.log(JSON.stringify(this.options.collection2.toJSON()))
this.trackCollection = JSON.stringify(this.options.collection2.toJSON());
this.trackObject = jQuery.parseJSON(this.trackCollection);
this.eventView = new EventView();
this.trackView = new TrackView();
},
render: function() {
this.$el.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay',
},
defaultView: 'resourceDay',
resources: this.trackObject,
droppable: true,
selectable: true,
selectHelper: true,
editable: true,
ignoreTimezone: false,
select: this.select,
eventClick: this.eventClick,
eventDrop: this.eventDropOrResize,
eventResize: this.eventDropOrResize,
drop: function(date, allDay, ev, ui, res) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// dropped event of resource a to a cell belonging to resource b?
copiedEventObject.resourceId = res.id;
//get title of event
var eventTitle = copiedEventObject.title;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
var event = new Event();
event.set({"title": eventTitle, "start_at": copiedEventObject.start, "color": null, "allday":copiedEventObject.allDay, "conference_id": conferenceID, "session_type_id": 1, "resource_Id": res.id});
events.create(event);
}
});
//Goto first event day on initialize
var start_at = Date.parse(startDate);
var year = $.fullCalendar.formatDate(start_at, 'yyyy');
var month = $.fullCalendar.formatDate(start_at, 'M');
var day = $.fullCalendar.formatDate(start_at, 'dd');
this.$el.fullCalendar( 'gotoDate', year , month, day)
this.$el.prepend('<button id="add_track" class="btn large-btn green-btn pull-right">Add Track</button>');
},
addAll: function() {
this.$el.fullCalendar('addEventSource', this.collection.toJSON());
},
addOne: function(event) {
this.$el.fullCalendar('renderEvent', event.toJSON());
},
addTrack: function() {
//get current day & format date
date = this.$el.fullCalendar( 'getDate' );
var formatDate = $.fullCalendar.formatDate(date, 'yyyy-MM-dd');
//create new track
var newTrack = new Track;
newTrack.set({'name': 'Track 1', 'day_date': formatDate, 'conference_id': conferenceID, "session_type_id": 1});
//save track to DB
this.options.collection2.create(newTrack);
},
updateTrack: function(track) {
//var fcRes = this.$el.fullCalendar('clientEvents', event.get('id'))[0];
//this.trackView.model = track.get('id');
console.log(this.trackView.model)
this.trackView.render();
},
switchTracks: function(){
//alert(this.$el.fullCalendar( 'getDate' ))
},
select: function(startDate, endDate, res) {
this.eventView.collection = this.collection;
this.eventView.model = new Event({start_at: startDate, end_at: endDate});
this.eventView.render();
},
eventClick: function(fcEvent) {
this.eventView.model = this.collection.get(fcEvent.id);
this.eventView.render();
},
change: function(event) {
// Look up the underlying event in the calendar and update its details from the model
var fcEvent = this.$el.fullCalendar('clientEvents', event.get('id'))[0];
console.log(fcEvent);
fcEvent.title = event.get('title');
fcEvent.color = event.get('color');
this.$el.fullCalendar('updateEvent', fcEvent);
},
eventDropOrResize: function(fcEvent) {
alert(fcEvent.id)
// Lookup the model that has the ID of the event and update its attributes
this.collection.get(fcEvent.id).save({start: fcEvent.start, end: fcEvent.end});
},
destroy: function(event) {
this.$el.fullCalendar('removeEvents', event.id);
}
});
Event Popup Modal View
var EventView = Backbone.View.extend({
el: $('#eventDialog'),
initialize: function() {
_.bindAll(this);
},
render: function() {
var buttons = {'Ok': this.save};
if (!this.model.isNew()) {
_.extend(buttons, {'Delete': this.destroy});
}
_.extend(buttons, {'Cancel': this.close});
this.$el.dialog({
modal: true,
title: (this.model.isNew() ? 'New' : 'Edit') + ' Event',
buttons: buttons,
open: this.open
});
return this;
},
open: function() {
this.$('#title').val(this.model.get('title'));
this.$('#color').val(this.model.get('color'));
},
save: function(startDate, endDate, res) {
//copiedEventObject.resourceId = res.id;
this.model.set({'title': this.$('#title').val(), 'color': this.$('#color').val(), 'conference_id': conferenceID, "session_type_id": 1, 'track_id': 1, /*'resourceId': res.id*/});
if (this.model.isNew()) {
this.collection.create(this.model, {success: this.close, wait: true});
} else {
this.model.save({}, {success: this.close});
}
},
close: function() {
this.$el.dialog('close');
},
destroy: function() {
this.model.destroy({success: this.close});
}
});
It looks like your calendar view does not have a model associated with it. You will need to pass the model into the calendar view when instantiating it. When you call this.eventView = new EventView(); you are not providing it with a reference to your underlying model in your main view.
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>