Using Explicitly Set Value Binding Handlers in Custom Binding Handlers of Knockout.js


Mike Flynn

I'm trying to make an observable FirstNamelike the default binding valueon an element . For some reason the ko.bindingHandlers.value.initfollowing is not working. When I update the textbox it doesn't reflect in the properties, however, if I manually set the binding valueon the element it works fine.

HTML

<td class="text-center text-nowrap">
    @Html.TextBoxFor(q => q.Number, new { data_bind = "dynamicFormList: { observable: true, value: FirstName }" })
</td>

handler

ko.bindingHandlers.dynamicFormList = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var values = ko.utils.unwrapObservable(valueAccessor());
            if (values.observable && values.value) {
                ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
            }
        }
}
Brother Woodrow

You can't call a binding handler like this, but there applyBindingsToNodeis a way (undocumented for some reason) that you can use:

ko.bindingHandlers.dynamicFormList = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var values = ko.utils.unwrapObservable(valueAccessor());
        if (values.observable && values.value) {
            ko.applyBindingsToNode(
                element,
                { value: values.value }
            );
        }
    }
}

Fiddle : https://jsfiddle.net/thebluenile/12agb3x9/ _

Related


Using unobservable objects in custom binding handlers

username I would like to knock out a variable in a custom binding using a gene. Especially in event handlers inside initcallbacks . example: ko.bindingHandlers.test = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {

Using unobservable objects in custom binding handlers

username I want to use knockout variables in .js custom bindings. Especially in event handlers inside initcallbacks . example: ko.bindingHandlers.test = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { var $element

Using unobservable objects in custom binding handlers

username I want to use knockout variables in .js custom bindings. Especially in event handlers inside initcallbacks . example: ko.bindingHandlers.test = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { var $element

Binding event handlers in PyQT

Techniquab Using PyQt5, I can bind some event handlers to my objects, while others only work when they are implemented as methods. changeEvent and event are examples of the latter type. You can see in the example below that I can programmatically add a keyPres

Binding event handlers in PyQT

Techniquab Using PyQt5, I can bind some event handlers to my objects, while others only work when they are implemented as methods. changeEvent and event are examples of the latter type. You can see in the example below that I can programmatically add a keyPres

Binding event handlers in PyQT

Techniquab Using PyQt5, I can bind some event handlers to my objects, while others only work when they are implemented as methods. changeEvent and event are examples of the latter type. You can see in the example below that I can programmatically add a keyPres

Binding event handlers in PyQT

Techniquab Using PyQt5, I can bind some event handlers to my objects, while others only work when they are implemented as methods. changeEvent and event are examples of the latter type. You can see in the example below that I can programmatically add a keyPres

Binding event handlers in PyQT

Techniquab Using PyQt5, I can bind some event handlers to my objects, while others only work when they are implemented as methods. changeEvent and event are examples of the latter type. You can see in the example below that I can programmatically add a keyPres

Binding event handlers in PyQT

Techniquab Using PyQt5, I can bind some event handlers to my objects, while others only work when they are implemented as methods. changeEvent and event are examples of the latter type. You can see in the example below that I can programmatically add a keyPres

Knockout.js - "value" binding in "html" binding

thread lemon I'm working on an application that needs to generate HTML dynamically based on some values. I put the following code where the dynamic HTML is: <div data-bind="html: extraHTML"></div> I have an object setup in my javascript file that contains var

Knockout.js - "value" binding in "html" binding

thread lemon I'm working on an application that needs to generate HTML dynamically based on some values. I put the following code where the dynamic HTML is: <div data-bind="html: extraHTML"></div> I have an object setup in my javascript file that contains var

How to apply binding and persist input value using Knockout JS?

Kees C. Bakker I am building an HTML/KnockoutJS application. My web server returns a form with input fields and information. When I update the model and execute ko.applyBindings, the input value is naturally overwritten by the model. Is there a way to automati

How to apply binding and persist input value using Knockout JS?

Kees C. Bakker I am building an HTML/KnockoutJS application. My web server returns a form with input fields and information. When I update the model and execute ko.applyBindings, the input value is naturally overwritten by the model. Is there a way to automati

How to apply binding and persist input value using Knockout JS?

Kees C. Bakker I am building an HTML/KnockoutJS application. My web server returns a form with input fields and information. When I update the model and execute ko.applyBindings, the input value is naturally overwritten by the model. Is there a way to automati

Knockout JS binding doesn't output value using simple viewmodel

Carl Weiss I'm trying to load a simple view model that has two models: Profile (a ko.observable()) and Request (a ko.observableArray()). When I apply the binding and then try to bind to the ether profile.field or foreach: request, I get no output, no javascrip

How to apply binding and persist input value using Knockout JS?

Kees C. Bakker I am building an HTML/KnockoutJS application. My web server returns a form with input fields and information. When I update the model and execute ko.applyBindings, the input value is naturally overwritten by the model. Is there a way to automati

How to apply binding and persist input value using Knockout JS?

Kees C. Bakker I am building an HTML/KnockoutJS application. My web server returns a form with input fields and information. When I update the model and execute ko.applyBindings, the input value is naturally overwritten by the model. Is there a way to automati

Update value in textbox with Knockout + Typeahead custom binding

user3145373jin I'm using a Knockout + Type Ahead app which will show a suggested list of entered characters to match the list. everything is normal. The only problem is that when I select an item from the list, it stores the entire object. I just want to store

About data binding by knockout js and value change

Thomas There are two textboxes and a span bound by culling. The example I got is easy to understand. Here is the code. <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind=

About data binding by knockout js and value change

Thomas There are two textboxes and a span bound by culling. The example I got is easy to understand. Here is the code. <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind=

Knockout Js radio binding not setting value

Callum Linington Here's the documentation I'm looking at: Example of adding a radio button it says: And only if the parameter value is equal to the value attribute of the radio button node, KO will set the element to check What I did here: jsfiddle self.radioV

About data binding by knockout js and value change

Thomas There are two textboxes and a span bound by culling. The example I got is easy to understand. Here is the code. <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind=