Question

我有一个用户显示值和一个类似的存储值。如何修改我所拥有的内容以便将正确的数据保存到模型中？

HTML

<div>formatted value for user display</div>
<input type="text" data-bind="value: formattedUnitOfCost" id="Model_Bound_ID" />

<div>unformatted value (the one I'd like to save)...this is not model bound</div>
<input type="text" data-bind="value: unitOfCost" />

的JavaScript /敲除

function AppViewModel() {
    var self = this;

            self.unitOfCost = ko.observable(1.01).extend({
                isServerSet: false
            });
            self.formattedUnitOfCost = ko.computed({
                read: function () {
                    return '$' + self.unitOfCost().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, ""));
                    self.unitOfCost(isNaN(value) ? 0 : value); // Write to underlying storage
                },
                owner: self
            });
}

ko.applyBindings(new AppViewModel());

未格式化的值不会显示给用户。 Model_Bound_ID是用户可编辑的。

Answer 1

你做错了。

您的模型绑定控件（我的意思是将发布到您的控制器的控件，并且具有未格式化的值）应该像任何其他控件一样创建，例如使用Html.HiddenFor或您想要的任何内容（Razor）？）模板。您必须在模板中添加data-bind属性。请记住，low-dash将在medium-dash中转换，因此您可以将其添加到Html Helper的attributes参数中，如下所示：{ data_bind = "value: unitOfcost" }。

显然，这个隐藏的字段将在发布时发送给控制器（直接发布，ajax或其他）。

现在需要添加可见控件，并将其绑定到另一个observable。这个observable将是一个计算的observable，它将执行此操作：

在阅读时，它将从unitOfWork获取值，并将其格式化为
on write，它将解析值以将其转换为数字，并使用解析后的值更新unitOfWork observable

事实上，你已经获得了几乎所有的代码，但是它一直在实现它。

Answer 2

另一种看待这个答案的方法是改变html：

<input type="text" data-bind="value: formattedUnitOfCost" id="Model_Bound_ID" />    
<input type="text" data-bind="value: unitOfCost" />

到这个

<input type="text" data-bind="value: formattedUnitOfCost"/>    
<input type="text" data-bind="value: unitOfCost"  id="Model_Bound_ID"  />

KO通过观察者的力量来完成其余的工作。天哪，我喜欢KO

如何调整Knockout的可写计算可观察量以使用MVC模型绑定？

2 个答案: