Javascript 淘汰选择绑定，当选项添加较晚时不记得值_Javascript_Knockout.js

Javascript 淘汰选择绑定，当选项添加较晚时不记得值

javascript knockout.js

Javascript 淘汰选择绑定，当选项添加较晚时不记得值,javascript,knockout.js,Javascript,Knockout.js,我正在使用knockout创建一个select元素，必须延迟设置选项（通过从服务器加载选项来设置选项）。这会导致初始值丢失。下面我有一些工作代码，它做了我想要的，但从服务器加载替换为静态表如果行setupSelect（）移动到脚本的末尾（这模拟了对服务器的异步ajax调用），然后select命令让我选择我认为当没有选择时，值被覆盖，然后选择到达，但值现在为空看起来我知道问题是什么，但不知道如何让它工作你能告诉我怎么让它工作吗 <!DOCTYPE HTML> <html&

我正在使用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>



你的东西：
您选择了一个id为的对象
.

var viewModel={
选择：{rows:ko.observearray（）}，
selectedThing:ko.observable（）//默认情况下未选择任何内容
};
函数setupSelect（）{
//在实际的应用程序中，使用$.ajax从服务器填充_raw行
变量行\u原始=[
{name:“一件事”，id:1}，
{name:“还有一件事”，id:2}，
{name:“另一件事”，id:3}
];
$.each（行、函数（索引、项）{
viewModel.select.rows.push（项目）；
});
}
//setupSelect（）//从服务器加载时（在异步模式下使用$.ajax），这一行将有效地移动到脚本的末尾。
视图模型。选择的内容（2）//设定初始值
应用绑定（视图模型）；
setupSelect（）//从服务器加载时（在异步模式下使用$.ajax），这一行将有效地移动到脚本的末尾。

您还可以在这里看到这两个示例
这是默认的bahavior:Knockout强制值与现有选项匹配，如果没有现有选项，它将取消可观测值的设置
然而，KO 3.1中有新的设置。它被称为valueAllowUnset
，它正好解决了这个场景
从

将此选项设置为true时，Knockout不会强制该值与现有选项匹配
如果不匹配，选择将设置为空选项，但不会覆盖该值
这在延迟加载选项并且存在现有值的情况下非常有用

因此，如果升级到Knockout.js 3.1，您可以编写
<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...'">



演示。
做得好，在我昨天阅读手册到现在的一段时间内，击倒了我的人，他们解决了我的问题。