2015-12-05 38 views
0

我有一个输入:Knockout.js力变化而变化的文本框

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

如果我改变文本框,然后自己数据绑定的作品...但如果我设置文本框的文本与jQuery的文本框发生更改,但没有发生数据绑定。

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

如何在没有任何按键的情况下更改文本框并仍然可以绑定到工作? ,

谢谢

回答

2

当使用淘汰赛您一般不应该用别的东西来修改视图。因此,而不是使用jQuery改变文本框的值,用基因敲除通过修改观察到它势必:

this.MyTextBox("Some text"); 

如果你真的需要修改淘汰赛之外的文本框,你可以用信号的value通过生成变化结合事件:

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

变化事件被触发时会通知观察者看到的片段,但我建议你使用自定义绑定处理到用KO操作直接的DOM;

您不仅限于使用像click,value等内置绑定 - 您可以创建自己的绑定。这就是如何控制observables如何与DOM元素进行交互,并为您提供很多灵活性,以便以易于重用的方式封装复杂的行为。

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

function viewModel(){ 
 
    this.val = ko.observable() 
 
}; 
 

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

 
ko.applyBindings(new viewModel());
label{ 
 
    margin-top:10px; 
 
    display:block; 
 
} 
 
span{ 
 
    font-size: 1.4rem; 
 
    font-weight: 700; 
 
    margin-left: 20px; 
 
    color: white; 
 
    background-color: red; 
 
    padding: 2px; 
 
}
<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>