订阅新模型中的observable

In my ViewModel, I'm dealing with 3 different model observables.

在我的ViewModel中,我正在处理3种不同的模型可观察对象。

Everything works, except I have an observable where I am trying to notify the user, on lost focus of the input (or some event), that the value should be a whole number, if it isn't. I also plan to use this same logic to send an ajax request.

一切正常,除了我有一个可观察的地方,我试图通知用户,输入(或某些事件)失去焦点,该值应该是一个整数,如果不是。我还计划使用相同的逻辑发送ajax请求。

I've never tried to work with an empty observable before, so I'm a little confused as to if I should just bind an event handler on it or how I should go about it.

我之前从未尝试使用空的observable,所以我有点困惑,如果我应该绑定一个事件处理程序或我应该怎么做。

Model :

    var deferredAccount = function() {
            var self = this;

            self.Id = ko.observable();
            self.accountNumber = ko.observable();
            self.participantId = ko.observable();
            self.taxPercentage = ko.observable();

        }

ViewModel : (a lot of other things removed)

newAccount = ko.observable();
newAccount(new model.DeferredAccount());   <-- to the View

Relevant HTML

    <form class="form-horizontal" data-bind="with: newAccount">

                    <label class=" col-sm-5 control-label">Account Number: </label>
                    <input data-bind="value: accountNumber" class="col-sm-3 form-control" type="text" />

                    <label class=" col-sm-5 control-label">Tax Percentage: </label>
                    <input id="percent" data-bind="value: taxPercentage" class="col-sm-3 form-control" type="text" min="0" max="85" title="Enter Percentage in Decimal Format"/>
    </form>

For taxPercentage, I want to validate that field on lostFocus or at some point. I think because I'm not used to working with so many different moving pieces I am getting confused on how to access the appropriate observable.

对于taxPercentage,我想在lostFocus或某些时候验证该字段。我想因为我不习惯使用这么多不同的动作片,所以我对如何访问适当的observable感到困惑。

1 个解决方案

#1

You are probably looking for an extender. Extenders are filters that you put between your view and your observable.

你可能正在寻找一个扩展器。扩展程序是您在视图和可观察对象之间放置的过滤器。

The knockout docs describe the process nicely and even have a fully implemented extender for rounding numbers that you can simply use:

淘汰文档很好地描述了这个过程,甚至还有一个完全实现的扩展器,用于舍入数字,你可以简单地使用它:

var deferredAccount = function() {
    var self = this;

    self.Id = ko.observable();
    self.accountNumber = ko.observable();
    self.participantId = ko.observable();
    self.taxPercentage = ko.observable().extend({numeric: 0});

}

and

<form class="form-horizontal" data-bind="with: newAccount">
    <label class="col-sm-5 control-label">Account Number: </label>
    <input data-bind="value: accountNumber" class="col-sm-3 form-control" type="text" />

    <label class=" col-sm-5 control-label">Tax Percentage: </label>
    <input id="percent" data-bind="value: taxPercentage" class="col-sm-3 form-control" type="text" min="0" max="85" title="Enter Percentage in Decimal Format"/>

</form>

No special event-handling necessary.

无需特殊事件处理。

To enforce min- and max values, look into the knockout-validation project.

要强制执行最小值和最大值,请查看淘汰验证项目。

#1