Question

jQuery代码看起来像这样，工作正常（可能看起来有点分类，所以请告诉我，我也会改变它）：jsFiddle

jQuery的：

$('.inputs').on('keyup',function(){
    $(this).parent().not(this).find('.inputs').val($(this).val());
}
);

HTML：

<div>
    <input type="text" class="inputs" value="hello">
    <input type="text" class="inputs" value="John">
</div>

如何为knockout.js重写此代码？

谢谢。

Answer 1

将它绑定到同一个observable：

<强> HTML

<div>
    <input type="text" class="inputs" id="first" data-bind="value:foobar,valueUpdate:'keyup'">
    <input type="text" class="inputs" id="second" data-bind="value:foobar,valueUpdate:'keyup'">
</div>

<强>视图模型

function AppViewModel() {
    this.foobar = ko.observable('hello');
}
ko.applyBindings(new AppViewModel());

我使用valueUpdate绑定实时更新输入而不是模糊（另请参阅：https://stackoverflow.com/a/4391419/664108）

Answer 2

看一下下面的代码片段，它可以和ko一起使用。

var value = "Hello John";
var viewModel = {
  Name: ko.observable(value)
};
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" data-bind="value:Name" class="inputs" id="first">
  <input type="text" data-bind="value:Name" class="inputs" id="second">
</div>
<span data-bind="text: Name"> </span>

希望，您将使用更多数据执行此操作。在这种情况下，请查看this sample，它会告诉您如何支持更多数据。

有关更多常见问题，请访问jqfaq.com

绑定两个输入，以便它们显示相同的文本，即使其中一个被用户更改

2 个答案: