jjzjj

javascript - knockout 选择绑定(bind),在选项添加晚时不记住值

coder 2024-07-28 原文

我正在使用 knockout 创建一个 select 元素,必须延迟设置选项(选项是通过从服务器加载它们来设置的)。这导致初始值丢失。下面我有一些工作代码,它做我想做的,但是从服务器加载替换为静态表。

如果行 setupSelect(); 被移动到脚本的末尾(这模拟了对服务器的异步 ajax 调用),然后选择要求我选择。

我认为当没有选择时值被覆盖,然后选择到达,但值现在为空。

看起来我知道问题出在哪里,但不知道如何让它工作。

你能告诉我如何让它工作吗?

<!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,它正是针对这种情况。

来自 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.

所以如果你升级到 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 .

关于javascript - knockout 选择绑定(bind),在选项添加晚时不记住值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22198994/

有关javascript - knockout 选择绑定(bind),在选项添加晚时不记住值的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗? - 2

    当我使用Bundler时,是否需要在我的Gemfile中将其列为依赖项?毕竟,我的代码中有些地方需要它。例如,当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试,但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/4758609/

  2. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序,我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件,包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式,但它

  3. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作),这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  4. ruby - ruby 中的 TOPLEVEL_BINDING 是什么? - 2

    它不等于主线程的binding,这个toplevel作用域是什么?此作用域与主线程中的binding有何不同?>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是,TOPLEVEL_BINDING始终引用Binding的预定义全局实例,而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层,它们都包含相同的绑定(bind),但它们不是同一个对象,您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

  5. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象? - 2

    当谈到运行时自省(introspection)和动态代码生成时,我认为ruby​​没有任何竞争对手,可能除了一些lisp方言。前几天,我正在做一些代码练习来探索ruby​​的动态功能,我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角,因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

  6. ruby - 如何在 Ruby 中向现有方法定义添加语句 - 2

    我注意到类定义,如果我打开classMyClass,并在不覆盖的情况下添加一些东西我仍然得到了之前定义的原始方法。添加的新语句扩充了现有语句。但是对于方法定义,我仍然想要与类定义相同的行为,但是当我打开defmy_method时似乎,def中的现有语句和end被覆盖了,我需要重写一遍。那么有什么方法可以使方法定义的行为与定义相同,类似于super,但不一定是子类? 最佳答案 我想您正在寻找alias_method:classAalias_method:old_func,:funcdeffuncold_func#similartoca

  7. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在,我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式?我不这么认为……或者有什么rake任务可以重新生成样式吗? 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你,你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  8. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序,其中需要一个可供用户选择颜色的字段,该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”,并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中,因此使用基

  9. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  10. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

    我正在尝试在Rails上安装ruby​​,到目前为止一切都已安装,但是当我尝试使用rakedb:create创建数据库时,我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

随机推荐