淘汰选择绑定，后期添加选项时不记得值 [英] Knockout select binding, not remembering value when options added late
问题描述
我正在使用剔除创建一个select元素，这些选项必须设置得较晚(这些选项是通过从服务器加载它们来设置的).这导致初始值丢失.在下面，我有一些可以正常工作的代码，它可以满足我的要求，但是用静态表代替了服务器的加载.
I am using knockout to create a select element, the options have to be set late (the options are set by loaded them from a server). This is causing the initial value to be lost. Below I have some working code it does what I want, but with the loading from server replaced with a static table.
如果将行setupSelect();移到脚本的末尾(这将模拟对服务器的异步ajax调用)，那么select将要求我选择.
If the line setupSelect(); is moved to the end of the script (this simulates the asynchronous ajax call to the server), then the select asks me to choose.
我认为，当没有选择时，值将被覆盖，然后选择就会到达，但现在该值为null.
I think that when there are no choices the value is overwritten, then the choices arrive, but the value is now null.
看起来我知道问题出在哪里，但不知道如何使其工作.
It looks like I know what the problem is, but don't know how to get it to work.
你能告诉我如何使它工作吗?
Can you tell me how to get it to work?
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
</head>
<body>
<p>
Your thing:
<select data-bind="options: (function(){return $root.select1.rows;})(),
optionsText: function(item){return item.name;},
optionsValue: function(item){return item.id;},
value: selectedThing1,
optionsCaption: 'Choose...'">
</select>
<span data-bind="visible: selectedThing1">
You have chosen a thing with id
<span data-bind="text: selectedThing1() ?
selectedThing1() :
'unknown'">
</span>.
</span>
</p>
<script type="text/javascript">
var viewModel = {
select: {rows: ko.observableArray() },
selectedThing : ko.observable() // Nothing selected by default
};
function setupSelect(){
//in the real application rows_raw is populated from a server using $.ajax
var rows_raw= [
{name: "a thing", id:1},
{name: "one more thing", id:2},
{name: "another thing", id:3}
];
$.each(rows_raw, function(index, item){
viewModel.select.rows.push(item);
});
}
//setupSelect(); //when loading from server (using $.ajax in async mode), then this line is effectivly moved to the end of the script.
viewModel.selectedThing(2); //set ititial value
ko.applyBindings(viewModel);
setupSelect(); //when loading from server (using $.ajax in async mode), then this line is effectivly moved to the end of the script.
</script>
</body>
</html>
您还可以在此处看到两个示例 http://jsfiddle.net/V33NT/1/
You can also see both examples here http://jsfiddle.net/V33NT/1/
推荐答案
这是默认行为:敲除强制值匹配现有选项，如果没有现有选项，则会取消设置可观察项.
This is default bahavior: Knockout forces the value to match an existing option, if there is no existings option it unsets the observable.
但是KO 3.1中有新设置.称为valueAllowUnset，它正好解决了这种情况.
However there is new setting in KO 3.1. which is called valueAllowUnset and it is addressing exactly this scenario.
- 将此选项设置为true时，Knockout不会强制该值与现有选项匹配.
- 在不匹配的情况下，所选内容将被设置为空选项，但该值不会被覆盖.
- 这在延迟加载选项并且存在现有值的情况下非常有用.
- With this option set to true, Knockout does not force the value to match an existing option.
- The selection will be set to an empty option in the case of a mismatch, but the value is not overwritten.
- This is very useful in scenarios where options are lazily loaded and there is an existing value.
因此，如果您升级到Knockout.js 3.1，则可以编写
So if you upgrade to Knockout.js 3.1 you can write
<select data-bind="options: (function(){return $root.select2.rows;})(),
optionsText: function(item){return item.name;},
optionsValue: function(item){return item.id;},
value: selectedThing2,
valueAllowUnset: true,
optionsCaption: 'Choose...'">
演示 JSFIddle .
这篇关于淘汰选择绑定，后期添加选项时不记得值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
