我使用knockout创建一个select元素,必须设置较晚的选项(通过从服务器加载选项来设置选项).这导致初始值丢失.下面我有一些工作代码,它做我想要的,但从服务器加载替换为静态表.
如果行setupSelect();被移动到脚本的末尾(这模拟了对服务器的异步ajax调用),然后select要求我选择.
我认为当没有选择时,值会被覆盖,然后选择到达,但值现在为空.
看起来我知道问题是什么,但不知道如何让它发挥作用.
你能告诉我如何让它发挥作用吗?
- <!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/
解决方法
这是默认的行为:Knockout强制该值与现有选项匹配,如果没有存在选项,则取消设置observable.
然而,KO 3.1中有新的设置.这被称为valueAllowUnset,它正在解决这个问题.
- 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,您可以写
- <select data-bind="options: (function(){return $root.select2.rows;})(),value: selectedThing2,valueAllowUnset: true,optionsCaption: 'Choose...'">
演示JSFIddle.