创建可观测值，将其他可观测值作为单个地图返回

Question

I have an own binding for numeric inputs made in knockoutJS which accepts only numbers.

To make big numbers I declare various instances of number in a NumberField like:

var NumberField = function () {
  var self = this;
  self.maskFormat = "0";
  self.firstNumber = ko.observable("");
  self.secondNumber = ko.observable("");
  self.thirdNumber = ko.observable("");
};

And

<input id="0" maxlength="1" type="tel" data-bind="numeric: firstNumber">
<input id="1" maxlength="1" type="tel" data-bind="numeric: secondNumber">
<input id="2" maxlength="1" type="tel" data-bind="numeric: thirdNumber">

This is working like a charm, but when I made submission, system is expecting a map with numbers. I achieved it IMHO in an ugly way:

Added to NumberField this attribute:

this.cleanNumber = ko.pureComputed(function () {
    return this.firstNumber().toString() + this.secondNumber().toString() + this.thirdNumber().toString();
}, this);

And in the code, when I need to use it I must do this:

let unwrapNumbers = this.numbers().cleanNumber().split("").map(function (item){
    return Number(item);
});

This is working, but... I'm pretty sure there is an easier and more straight way.... Any suggestions?

Answer 1

I think it could help to split the computed in to two parts:

1. Getting the numbers you want to include in order
2. Creating a string based on the ordered values

Often it makes sense to split a computed in to several pure computeds that have a single clear data processing responsibility.

 var NumberField = function () { var self = this; self.firstNumber = ko.observable(1); self.secondNumber = ko.observable(2); self.thirdNumber = ko.observable(3); self.orderedNumbers = ko.pureComputed(function() { return [self.firstNumber, self.secondNumber, self.thirdNumber].map(ko.unwrap); }); self.cleanedNumber = ko.pureComputed(function() { return self.orderedNumbers().join(""); }); }; var nf = new NumberField(); // If you want the numbers: console.log(nf.orderedNumbers()); // If you want the string console.log(nf.cleanedNumber()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 

Now, I'm not sure what your requirements are, but you can take it one step further and use an observableArray as the base data format:

 var NumberField = function () { var self = this; self.numbers = ko.observableArray( [ko.observable(0), ko.observable(1), ko.observable(2)]); self.add = function() { self.numbers.push(ko.observable(self.numbers().length)); } self.unwrappedNumbers = ko.pureComputed(function() { return self.numbers().map(ko.unwrap); }); self.cleanedNumber = ko.pureComputed(function() { return self.unwrappedNumbers().join(""); }); }; ko.applyBindings(new NumberField()); 

 label { display: block } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div data-bind="foreach: numbers"> <label> <span data-bind="text: 'Number ' + $index()"></span> <input type="number" data-bind="textInput: $parent.numbers()[$index()]"> </label> </div> <button data-bind="click: add">add</button> <pre> Unwrapped:<code data-bind="text: unwrappedNumbers"></code> Cleaned:<code data-bind="text: cleanedNumber"></code> </pre>