Knockout select binding, not remembering value whe

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.

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.

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>

You can also see both examples here http://jsfiddle.net/V33NT/1/

标签： javascript knockout.js

1条回答

时光不老，我们不散

2楼-- · 2019-06-19 22:18

This is default bahavior: Knockout forces the value to match an existing option, if there is no existings option it unsets the observable.

However there is new setting in KO 3.1. which is called valueAllowUnset and it is addressing exactly this scenario.

From Knockout.js 3.1 Released

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.

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...'">

Demo JSFIddle.

0人赞添加讨论(0) 举报

Knockout select binding, not remembering value whe

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间