javascript - Update the observable when input value is changed by Javascript

Question

Is there a way to update an observable when the <input> value is changed, but programatically, i.e. by Javascript?

Here is a jsfiddle of this use case that I am not able to make it work: http://jsfiddle.net/qYXdJ/

As you see when the "Update input value by Javascript" link is clicked the observable is obviously not updated, since it is not reflected in the <span>

Answer 1

如果您绝对不能直接修改 observable（这是最好的方法），您可以触发“onchange”事件（Knockout 内部使用该事件）。使用 jQuery，这很简单：

$('#update').on('click', function() {
    $('#input2').val('New Value').trigger('change');
});

如果您出于某种原因不想使用 jQuery，请查看此问题。

Answer 2

正如 cyanfish 指出的那样，正确的方法是更新 observable。

如果问题是您的代码无法访问 observable，例如您正在编写一个书签来自动填写表格，那么您可以像这样访问 observable：

function setValue(input, value) {
  var bindingsString = input.getAttribute('data-bind');
  if (bindingsString) {
    var bindings = ko.bindingProvider.instance.parseBindingsString(bindingsString, ko.contextFor(input), input);
    if (bindings.value) {
      bindings.value(value);
    } else if (bindings.checked) {
      bindings.checked(value);
    } else {
      input.value = value;
    }
  } else {
    input.value = value;
  }
}

Answer 3

您必须更改 viewModel 'name' 属性而不是输入字段值，因为它是可观察的，并且该属性的任何更改都将反映到所有绑定的 html 元素。

var viewModel = {
        name: ko.observable()
    };
    ko.applyBindings(viewModel);

    document.getElementById('update').onclick = function(){
        viewModel.name('New Value');
        //document.getElementById('input2').value = 'New Value';
    }