Question

我使用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/

Answer 1

这是默认行为：Knockout强制该值与现有选项匹配，如果没有存在选项，则取消设置observable。

然而，KO 3.1中有新的设置。这被称为valueAllowUnset，它正在解决这个问题。

来自Knockout.js 3.1 Released

如果将此选项设置为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...'">

演示JSFIddle。

敲除选择绑定，而不是在后期添加选项时记住值

1 个答案: