如何在元素上设置事件 - KnockoutJS

时间:2016-04-21 13:34:26

标签: javascript knockout.js

我要做的是在给定数量(数量)上设置一个事件,并验证它是否低于数据库中保存的数量

这是我的代码:

ko.bindingHandlers.typeahead = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var $element = $(element);
        var allBindings = allBindingsAccessor();

        $element.typeahead({
            highlight: true,
            minLength: 0,
        },
        {
            name: 'data',
            display: allBindings.key,
            source: searchData(allBindings.items, allBindings.key)
        }).on('typeahead:select', function(element, datum, name) {
            @if (Auth::user()->account->fill_products)
                var model = ko.dataFor(this);
                if (model.expense_public_id()) {
                    return;
                }
                if (datum.notes) {
                    model.notes(datum.notes);
                }
                if (datum.cost) {
                    model.cost(accounting.toFixed(datum.cost, 2));
                }
                if (!model.qty()) {
                    model.qty(1);
                }

                @if ($account->invoice_item_taxes)
                    if (datum.default_tax_rate) {
                        model.tax(self.model.getTaxRateById(datum.default_tax_rate.public_id));
                    }
                @endif
            @endif
            onItemChange();
        }).on('typeahead:change', function(element, datum, name) {
            var value = valueAccessor();
            value(datum);
            onItemChange();
            refreshPDF(true);
        });
    }

我是KnockoutJS的新手...... 我需要帮助

2 个答案:

答案 0 :(得分:0)

我想你有这样的数量可观察量:

_self.Quantity = ko.observable(0);

您可以订阅此observable以捕获对其值所做的每个更改:

_self.Quantity.subscribe(function(newValue) {
     // newValue will hold the most recent value
});

整个ViewModel看起来像这样:

YourViewModel = function (item, parent) {
    var _self = this;

    _self.Quantity = ko.observable(0);

    _self.Quantity.subscribe(function(newValue) {
        // newValue will hold the most recent value
    });
}

答案 1 :(得分:0)

您可以使用knockoutjs的extender功能:documentation

Extender在新值设置到属性之前执行,因此您可以对其进行验证。

来自knockoutjs.com()的样本:



ko.extenders.numeric = function(target, precision) {
    //create a writable computed observable to intercept writes to our observable
    var result = ko.pureComputed({
        read: target,  //always return the original observables value
        write: function(newValue) {
            var current = target(),
                roundingMultiplier = Math.pow(10, precision),
                newValueAsNum = isNaN(newValue) ? 0 : parseFloat(+newValue),
                valueToWrite = Math.round(newValueAsNum * roundingMultiplier) / roundingMultiplier;
 
            //only write if it changed
            if (valueToWrite !== current) {
                target(valueToWrite);
            } else {
                //if the rounded value is the same, but a different value was written, force a notification for the current field
                if (newValue !== current) {
                    target.notifySubscribers(valueToWrite);
                }
            }
        }
    }).extend({ notify: 'always' });
 
    //initialize with current value to make sure it is rounded appropriately
    result(target());
 
    //return the new computed observable
    return result;
};
 
function AppViewModel(one, two) {
    this.myNumberOne = ko.observable(one).extend({ numeric: 0 });
    this.myNumberTwo = ko.observable(two).extend({ numeric: 2 });
}
 
ko.applyBindings(new AppViewModel(221.2234, 123.4525));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<p><input data-bind="value: myNumberOne" /> (round to whole number)</p>
<p><input data-bind="value: myNumberTwo" /> (round to two decimals)</p>
&#13;
&#13;
&#13;