在按键和单击事件上更新observable

Question

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

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

我使用的原因keyup是因为我有一个"按键输出"系统设置.这在用户键入时效果很好,但是如果他们通过拼写检查来纠正拼写(使用鼠标点击而根本没有键盘),则绑定将不会更新.

绑定变量Comment声明为:

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

订阅很简单:

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

当点击一个按钮时,有什么方法可以强制绑定获取文本区域的当前值吗？

Answer 1

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

valueUpdate: 'input'

KnockoutJS - "价值"绑定:

"input" - 当<input>或<textarea>元素的值发生更改时更新视图模型.请注意,此事件仅由相当现代的浏览器引发(例如,IE 9+).

这是一个示例JSFiddle(最初由迈克尔·贝斯特撰写),我发现并改编了它,说明了它的用法,它处理键击和鼠标点击以及限制:

演示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());