使用 ko numeric extender 计算其他字段

Question

请看下面我的代码示例-

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

    this.myNumberTwo = ko.computed(() => {
        return this.myNumberOne+1;
    });
    this.myNumberOne = ko.computed(() => {
        return this.myNumberTwo+1;
    });
}

我的意图是当用户在 Textbox2 中输入十进制数时四舍五入并设置 Textbox1 的值。 PFB这个例子更好的理解需求-

如果我在Textbox1中输入23.40，那么Textbox 2的值应该设置为23
如果我在Textbox2中输入1468.2489，那么Textbox 1的值应该设置为1468

目前它不符合上述要求。请帮忙。

Answer 1

您可以使用更改 event 绑定来执行类似的操作：

在 Textbox 1 的 change 上，用 myNumberOne 的 parseInt 值更新 myNumberTwo。反之亦然。

function AppViewModel() {
  this.myNumberOne = ko.observable(0)
  this.myNumberTwo = ko.observable(0)
  
  this.myNumberOneChanged = () => this.myNumberTwo(parseInt(this.myNumberOne()))
  this.myNumberTwochanged = () => this.myNumberOne(parseInt(this.myNumberTwo()))
}

ko.applyBindings(new AppViewModel());

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

<p><input data-bind="value: myNumberOne, event: { change: myNumberOneChanged }" /> Textbox 1</p>
<p><input data-bind="value: myNumberTwo, event: { change: myNumberTwochanged }" /> Textbox 2</p>

Answer 2

您可以手动订阅 observables 以获得想要的效果：

function AppViewModel() {
    this.myNumberOne = ko.observable(0);
    this.myNumberTwo = ko.observable(0);

    this.myNumberOne.subscribe((newVal) => this.myNumberTwo(Math.round(this.myNumberTwo())));
    this.myNumberTwo.subscribe((newVal) => this.myNumberOne(Math.round(this.myNumberOne())));
}

Fiddle: https://jsfiddle.net/thebluenile/fbz2mvcy/

使用 ko numeric extender 计算其他字段

calculate other fields using ko numeric extender

knockout.js