Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Applying knockout extenders after mapping

I'm having a problem with adding a knockout extender to observables after they have been created. In the following example the extender is run on foo every time the value changes as expected but only once, when first called, for bar.

var viewModel = function(){
    var self = this;

    self.foo = ko.observable(1).extend({ numeric: 1 });

    self.bar = ko.observable(1);

    self.bar.extend({ numeric: 1 });
};

Essentially I am mapping a large JSON object and would like to add extenders after the mapping has occurred to some of the properties. Is there a simple way to do this?

Below is a jsfiddle showing the problem:

http://jsfiddle.net/LgxTn/

like image 995
sWW Avatar asked Jun 07 '13 14:06

sWW


People also ask

How do you apply knockout?

Hold can at arm's length and direct spray toward the area to be treated. Use a sweeping motion to apply product and back away from treated area while holding the can 36 inches away from the surface being treated. Areas of 80-100 sq ft can be treated in approximately 10 seconds with Knockout E. S. Area Treatment.

What activates the knockout?

To activate Knockout, add the following line to a <script> block: ko. applyBindings(myViewModel); You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery's $ function.

What is knockout mapping?

Knockout is designed to allow you to use arbitrary JavaScript objects as view models. As long as some of your view model's properties are observables, you can use KO to bind to them to your UI, and the UI will be updated automatically whenever the observable properties change.


1 Answers

The problem you have is that the extender is creating a new observable (based on the observable it's extending). And that new observable is not being used in your second call to extend.

To fix this (without changing the code of the extender) you can assign the response from calling extend into the same property it's called.

In other words, add self.bar = in front of your last line in order to have this:

self.bar = self.bar.extend({ numeric: 1 });
like image 151
Mariano Desanze Avatar answered Oct 04 '22 08:10

Mariano Desanze