knockout.js - 在按键和点击事件上更新可观察的

Question

我有一个看起来像这样的值绑定(bind):

<textarea class="form-control" placeholder="Comments" rows="10" data-bind="value: $root.GetTabComment($data).Comment, valueUpdate: 'keyup'"></textarea>

我使用 keyup 的原因是因为我设置了“键入时保存”系统。这在用户打字时效果很好，但如果他们通过拼写检查纠正拼写(使用鼠标点击，根本不用键盘)，绑定(bind)将不会更新。

绑定(bind)变量 Comment 声明为:

Comment = ko.observable("").extend({throttle: 1000})

订阅很简单:

Comment.subscribe(function(){
  //save code
});

有什么方法可以让我在单击按钮时强制绑定(bind)采用文本区域的当前值？

Answer 1

你可以尝试使用 input 而不是 keyup:

valueUpdate: 'input'

KnockoutJS - The "value" binding :

"input" - updates your view model when the value of an <input> or <textarea> element changes. Note that this event is only raised by reasonably modern browsers (e.g., IE 9+).

这是我发现并改编的示例 JSFiddle ( originally authored by Michael Best)，它说明了它的用法，它处理击键和鼠标点击以及节流:

Demo JSFiddle

HTML:

<p>Type stuff here: 
    <input data-bind='value: instantaneousValue, valueUpdate: "input"' /></p>

<p>Current throttled value: <b data-bind='text: throttledValue'> </b></p>

<div data-bind="visible: loggedValues().length > 0">
    <h3>Stuff you have typed:</h3>
    <ul data-bind="foreach: loggedValues">
        <li data-bind="text: $data"></li>
    </ul>
</div>

JS:

function AppViewModel() {
    this.instantaneousValue = ko.observable();
    this.throttledValue = ko.computed(this.instantaneousValue)
                            .extend({ throttle: 400 });

    // Keep a log of the throttled values
    this.loggedValues = ko.observableArray([]);
    this.throttledValue.subscribe(function (val) {
        if (val !== '')
            this.loggedValues.push(val);
    }, this);
}

ko.applyBindings(new AppViewModel());