Twitter bootstrap 3 Modal with knockout

bootstrap modal provided events, you just need to hook up event ‘’. BTW, do proper disposal too. ko.bindingHandlers.modal = { init: function (element, valueAccessor) { $(element).modal({ show: false }); var value = valueAccessor(); if (ko.isObservable(value)) { // Update 28/02/2018 // Thank @HeyJude for fixing a bug on // double “” event firing. // Use … Read more

Adding properties to the view model created by using the Knockout JS mapping plugin

You need to use a create method on the mapping object itself like: var mapping = { //customize at the root level. create: function(options) { //first map the vm like normal var vm = ko.mapping.fromJS(; //now manipulate the returned vm in any way that you like vm.someProperty = “test”; vm.someComputed = ko.computed(function() { return vm.first() … Read more

What’s the applyBindings’ second parameter used for?

KnockoutJS is open source. From the relevant file: ko.applyBindings = function (viewModelOrBindingContext, rootNode) { // Some code omitted for brevity… if (rootNode && (rootNode.nodeType !== 1) && (rootNode.nodeType !== 8)) throw new Error(“ko.applyBindings: first parameter should be your view model; second parameter should be a DOM node”); rootNode = rootNode || window.document.body; // Make “rootNode” … Read more

knockoutjs: can we create a dependentObservable function with a parameter?

In Knockout, bindings are implemented internally using dependentObservables, so you can actually use a plain function in place of a dependentObservable in your bindings. The binding will run your function inside of a dependentObservable, so any observables that have their value accessed will create a dependency (your binding will fire again when it changes). Here … Read more

Prevent event bubbling when using the checked binding in knockoutjs

It sounds like you were on the right track. You basically want to do the equivalent of: click: function() { return true; }, clickBubble: false OR This could be done in a custom binding like: ko.bindingHandlers.stopBubble = { init: function(element) { ko.utils.registerEventHandler(element, “click”, function(event) { event.cancelBubble = true; if (event.stopPropagation) { event.stopPropagation(); } }); } … Read more

Unique ids in knockout.js templates

An alternative that does not rely on the order that the fields are bound is to have the binding set an id property on the data itself, which would need to be an observable. ko.bindingHandlers.uniqueId = { init: function(element, valueAccessor) { var value = valueAccessor(); = || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter); =; … Read more

Example of knockoutjs pattern for multi-view applications [closed]

There are a few directions that you could go with this one. One option is to call ko.applyBindings with distinct view models against separate DOM elements like: var viewModelA = { name: “Bob” }; var viewModelB = { price: 50 }; ko.applyBindings(viewModelA, document.getElementById(“aContainer”)); ko.applyBindings(viewModelB, document.getElementById(“bContainer”)); In this case, you would want to make sure … Read more

Can cleanNode() be used to clean binding?

ko.cleanNode is used internally by Knockout to clean up data/computeds that it created related to the element. It does not remove any event handlers added by bindings or necessarily understand if a binding made changes to the DOM. This can definitely cause problems like having multiple handlers attached to an element when it is subsequently … Read more