I am trying to incorporate a Bootstrap 3 modal in to a knockoutjs viewmodel with a custom binding, and have taken heavily from knockout.js - deferred databinding for modal?.
Using https://jsfiddle.net/BitWiseGuy/4u5egybp/ each observable on the popup is checked if it is valid i.e. data-bind="value: UserBeingEdited() && UserBeingEdited().Age
and this will result in a lot of checks (to write) for a larger view-model with many fields.
So to remove this check i have tried to use modify the modal binding with return ko.bindingHandlers['with'].update.apply(this, arguments);
as below:
ko.bindingHandlers['modal'] = {
init: function(element, valueAccessor, allBindingsAccessor) {
var allBindings = allBindingsAccessor();
var $element = $(element);
$element.addClass('hide modal');
if (allBindings.modalOptions && allBindings.modalOptions.beforeClose) {
$element.on('hide', function() {
var value = ko.utils.unwrapObservable(valueAccessor());
return allBindings.modalOptions.beforeClose(value);
});
}
return ko.bindingHandlers['with'].init.apply(this, arguments);
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (value) {
$(element).removeClass('hide').modal('show');
} else {
$(element).modal('hide');
}
return ko.bindingHandlers['with'].update.apply(this, arguments);
}
};
Which then allows me to bind without any check data-bind="text: quantity"
, however although working i am getting an error: Uncaught TypeError: Cannot read property 'apply' of undefined
.
I have the following questions please:
How can i remove the errors in the console with my fiddle http://jsfiddle.net/6eh3Lrsm/9/
As per the comments from the original SO link, the
with
binding recreates DOM elements which could stop controls from working - in which cases would I need to look out for this (and any links to why)? In these cases I presume not usingwith
and doing a binding check within the data-bind value itself would be enough?