javascript - Knockout.js modify value before ko.observable() write - Stack Overflow

admin管理员组

文章数量:1330909

I've got a working viewmodel with numerous variables.

I use autoNumeric (/) for text formatting in textbox. I'd like to use the input field's observed data in a puted observable, but if the observable textfield with the formatting gets modified, the formatting also gets saved in the variable.

How can I only observe the value of the input field without the formatting?

I think the best way to this could be a getter/setter to the observable, and remove the formatting when the value is set. I couldn't find a solution in knockout's documentation to write get/set methods for ko.observable(), and koputed() can not store a value.

I don't want to use hidden fields, or extra variables.
Is this possible without it?

I've got a working viewmodel with numerous variables.

I use autoNumeric (http://www.decorplanit./plugin/) for text formatting in textbox. I'd like to use the input field's observed data in a puted observable, but if the observable textfield with the formatting gets modified, the formatting also gets saved in the variable.

How can I only observe the value of the input field without the formatting?

I think the best way to this could be a getter/setter to the observable, and remove the formatting when the value is set. I couldn't find a solution in knockout's documentation to write get/set methods for ko.observable(), and ko.puted() can not store a value.

I don't want to use hidden fields, or extra variables.
Is this possible without it?

• javascript
• jquery
• knockout.js
• number-formatting

Share Follow edited Apr 23, 2013 at 14:31 mhu 18.1k1010 gold badges6565 silver badges9494 bronze badges asked Apr 23, 2013 at 14:26 4spir4spir 1,18422 gold badges1515 silver badges3232 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Solution, as seen on http://knockoutjs./documentation/extenders.html

ko.extenders.numeric = function(target, precision) {
//create a writeable puted observable to intercept writes to our observable
var result = ko.puted({
    read: target,  //always return the original observables value
    write: function(newValue) {
        var current = target(),
            roundingMultiplier = Math.pow(10, precision),
            newValueAsNum = isNaN(newValue) ? 0 : parseFloat(+newValue),
            valueToWrite = Math.round(newValueAsNum * roundingMultiplier) / roundingMultiplier;

        //only write if it changed
        if (valueToWrite !== current) {
            target(valueToWrite);
        } else {
            //if the rounded value is the same, but a different value was written, force a notification for the current field
            if (newValue !== current) {
                target.notifySubscribers(valueToWrite);
            }
        }
    }
});

//initialize with current value to make sure it is rounded appropriately
result(target());

//return the new puted observable
return result;
};

And later on

function AppViewModel(one, two) {
  this.myNumberOne = ko.observable(one).extend({ numeric: 0 });
  this.myNumberTwo = ko.observable(two).extend({ numeric: 2 });
}

You can use ko.puted() for this. You can specify a write option, see Writeable puted observables

Example (taken from knockout documentation):

function MyViewModel() {
   this.price = ko.observable(25.99);

   this.formattedPrice = ko.puted({
       read: function () {
           return '$' + this.price().toFixed(2);
       },
       write: function (value) {
           // Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable
           value = parseFloat(value.replace(/[^\.\d]/g, ""));
           this.price(isNaN(value) ? 0 : value); // Write to underlying storage
       },
       owner: this
   });
}

ko.applyBindings(new MyViewModel());

本文标签： javascriptKnockoutjs modify value before koobservable() writeStack Overflow