Question

我的输入字段上有一个事件，每次更改其中的值时都会执行某些操作。这可以正常工作，但是当我想用一个函数更改我的viewmodel中的一个observable的值时，该事件不会被调用。

我可以在我的函数中手动触发事件，但我想询问是否有更好的方法来执行此操作。

我的代码的一部分：

$("body").on("input", "input", function(){
    alert('changed');
    // DO SOMETHING
});

var ViewModel = function() {
    var self = this;
    self.firstName = ko.observable();

    self.setDefaultValue = function() {
        self.firstName('');
    }
};

小提琴：http://jsfiddle.net/LkqTU/19253/

Answer 1

由于你的jquery事件处理程序是一个固定的约束，你可以创建一个custom binding，在更新时触发你的jquery事件。你可以用几种不同的方式做到这一点，但这里有几种方法：

<input data-bind="value: firstName, trigger: {event: 'input', watch: firstName}"/>
<input data-bind="triggeringValue: firstName"/>
<input data-bind="value: firstName, triggerInput"/>

在第一种方法中，您的自定义绑定的“更新”功能会触发firstName的任何更改，然后您可以$(element).trigger(valueAccessor().event)。

在第二种方法中，您的自定义绑定可能会延长knockout basic "value" binding并触发硬编码'输入'事件。

在第三种方法中，您可以从更新函数中的allBindings参数获取值绑定，然后将触发器绑定到它。

Answer 2

请在淘汰赛之外避免使用DOM操作。

您可以执行以下操作：

将您的绑定更改为包含valueUpdate option
使用subscribe在值更改时收到通知

HTML：

 <p>First name: <input data-bind='value: firstName, valueUpdate: "input"' /></p>

JS：

var ViewModel = function() {
    var self = this;
    self.firstName = ko.observable();

    self.setDefaultValue = function() {
        self.firstName('');
    }
    self.firstName.subscribe(function () { alert('changed'); });
};

ko.applyBindings(new ViewModel());

请注意，如果您不需要上下文，则可以轻松地重复使用该函数：

function onChanged() {
    alert('changed');
}

//...

self.firstName.subscribe(onChanged);

//some other place
$("body").on("input", "input", onChanged);

http://jsfiddle.net/LkqTU/19253/

更改observable时，在函数上调用Jquery

2 个答案: