Knockout.JS：从模型到视图的不同值答案

【问题标题】：Knockout.JS: DIfferent values from model to viewKnockout.JS：从模型到视图的不同值
【发布时间】：2011-11-15 16:01:23
【问题描述】：

我正在使用 KnockoutJS，并且我有一个输入控件来显示我的模型中的数字。

一切正常，但是我想在输入控件中显示我的数字之前对其进行格式化 - 但我想将它作为一个数字保留在我的视图中！所以，假设我有以下代码：

<td><input class='requiredNum' type='text' data-bind="value: testNum"></input></td>

我有一个函数 toText() 可以将数字转换为我需要的数字。但是，这不起作用：

<td><input class='requiredNum' type='text' data-bind="value: toText(testNum)"></input></td>

我可以理解问题在于 Knockoutjs 不知道如何做相反的事情（从文本转换为数字） - 但这对我来说不是问题，因为我已经以另一种方式处理了它。

你能给我推荐一个解决方案吗？

【问题讨论】：

我看到这个答案未被接受。有什么问题需要我帮你解决吗？
没有答案没问题，我只是忘记接受了，对不起！感谢您的帮助！

标签： javascript knockout.js number-formatting

【解决方案1】：

最简单的解决方案是使用writeable dependentObservable。

var viewModel = {
    number: ko.observable(10)
};

viewModel.formattedNumber = ko.dependentObservable({
  read: function() {
     //do formatting on this.number() here
     return this.number().toFixed(4);
  },
  write: function(newValue) {
     //take user input and parse into a number
     this.number(parseFloat(newValue));
  },
  owner: viewModel
});

示例： http://jsfiddle.net/rniemeyer/8bsAF/

【讨论】：