与'与'绑定?
在Knockout文档中,如果我们不使用ko.observable(...),则说单向数据绑定是可能的:http://knockoutjs.com/documentation/value-binding.html
但是,下面的代码并不像我预期的那样工作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form data-bind="with: selectedMerchant">
<input data-bind="value: name"></input>
<button data-bind="click: change"> CHANGE </button>
<button data-bind="click: show"> SHOW </button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js" type="text/javascript"></script>
<script>
function PartnersViewModel() {
self.selectedMerchant = {'name': 'John'};
self.show = function() {
alert(JSON.stringify(self.selectedMerchant));
}
self.change = function() {
self.selectedMerchant = {'name': 'David'};
}
}
ko.applyBindings(new PartnersViewModel());
</script>
</body>
</html>
'selectedMerchant'被声明为没有ko.observable(...),所以它应该是单向绑定的。 我预计,一旦我点击“更改”按钮,输入框内的文本就会变成“大卫”。 我也尝试了不同的方向 - 我更改了输入内的文本并点击了“SHOW”按钮。 消息框给出了它在开始时的初始值。
如果你想要一个真正的单向绑定来继续更新UI,你可以使用一个计算出来的observable。 除非您为计算指定了“写入”属性,否则只会在模型 - > UI方向上进行更新。 这就是说,只需用span或label来替换输入框就可以达到相同的效果,以防止用户更新值,所以我不确定是否看到了单向绑定的效用。
function PartnersViewModel() {
var self = this;
self.selectedMerchant = ko.observable({'name': 'John'});
self.show = function() {
alert(JSON.stringify(self.selectedMerchant()));
}
self.change = function() {
self.selectedMerchant({'name': 'David'});
}
self.selectedName = ko.computed(function(){
return self.selectedMerchant().name;
});
}
ko.applyBindings(new PartnersViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js" type="text/javascript"></script>
<div data-bind="with: selectedMerchant">
<input data-bind="value: $parent.selectedName"></input>
<button data-bind="click: $parent.change"> CHANGE </button>
<button data-bind="click: $parent.show"> SHOW </button>
</div>
为了扩展M. Ihsan的正确答案,Knockout将在不使用observables时使用一种方式绑定,并使用普通的JavaScript变量/对象。 这是一个例子。
function ExampleObject(one, two) {
var self = this;
self.one = one;
self.two = ko.observable(two);
self.ChangeVariables = function() {
self.one = "1";
self.two("2");
console.log(self.one, ko.toJS(self.two));
}
}
function ViewModel() {
var self = this;
self.bindingExample = ko.observableArray();
self.Load = function() {
self.bindingExample.push(new ExampleObject("one way", "two ways"));
self.bindingExample.push(new ExampleObject("one way", "two ways"));
self.bindingExample.push(new ExampleObject("one way", "two ways"));
self.bindingExample.push(new ExampleObject("one way", "two ways"));
}
self.Load();
}
ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<table border=1>
<thead>
<tr>
<th>1 way</th>
<th>2 way</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: bindingExample">
<tr>
<td data-bind="text: one"></td>
<td data-bind="text: two"></td>
<td> <a data-bind="click: ChangeVariables"> Change Variables</a></td>
</tr>
</tbody>
</table>
with
绑定已经是单向绑定,就像大多数绑定一样。 它们从模型到视图是单向的,但这要求模型的价值是可观察的。
value
通常是双向绑定。 文档中描述的单向性从视图到模型,这不是您想要的方向。
换句话说,你需要selectedMerchant
是可观察的。
上一篇: binding with 'with'?