Question

我有一个输入：

<input id="MyTextBox" type="text" data-bind="value: MyTextBox" />

如果我自己更改文本框然后数据绑定工作...但是如果我使用JQuery设置文本框的文本，文本框会更改但不会发生数据绑定。

$("#MyTextBox").val("Some text");

如何在没有任何击键的情况下更改文本框并仍然可以使用绑定工作？

谢谢

Answer 1

使用Knockout时，通常不应该使用其他东西来修改视图。因此，不要使用jQuery来更改文本框值，而是通过修改它绑定的observable来使用Knockout：

this.MyTextBox("Some text");

如果您确实需要修改Knockout之外的文本框，可以通过生成更改事件来发出value绑定信号：

$("#MyTextBox").val("Some text").change();

Answer 2

当触发更改事件时，会通知观察者看到该片段，但我建议您使用 自定义绑定处理程序 来操作用KO直接DOM;

您不仅限于使用内置绑定，例如点击，值等等 - 您可以创建自己的绑定。这是如何控制observable与DOM元素交互的方式，并为您提供了以易于重用的方式封装复杂行为的灵活性。

参考。 http://knockoutjs.com/documentation/custom-bindings.html

＆＃13;

function viewModel(){
     this.val = ko.observable()
};

viewModel.prototype.changeValue= function(){
       $("#txt_data").val("Updated by JQuery: " + $("#txt_jqr").val()).change();      
};

ko.applyBindings(new viewModel());

＆＃13;

label{
  margin-top:10px;
   display:block;
}
span{
    font-size: 1.4rem;
    font-weight: 700;
    margin-left: 20px;
    color: white;
    background-color: red;
    padding: 2px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="txt_data">Data-Bind Text:</label>
<input type="text" id="txt_data" data-bind="value: val"/>
<span data-bind="text: val"></span>
<br/>
<label for="txt_jqr">Jquery Text to change:</label>
<input type="text" id="txt_jqr"/>
<br/>
<br/>
<button data-bind="click: changeValue">Change view model value</button>

＆＃13;

JavaScript更改文本框后，Knockout.js强制更改

2 个答案: