javascript - 自定义绑定(bind) (knockout.js) 以根据其他 <select> 更新 <select>

Question

到目前为止，我已经使用 knockout 几个月了，但我已经成功了。

到目前为止，我遇到了一个问题(让我们这样调用它)，我无法更新 SELECT 标记中的选项，因为从服务器检索数据的 ajax 方法位于 $(document) 内.ready() 所以基本上我的 SELECT 标签从一开始就充满了数据，但是如果想根据我在第一个列表中选择的内容更改第二个列表中的“选项”怎么办？

让我为您分解一下，以便您了解情况如何..

-- 我的观点概述 [HTML5 + JQM]--

<div data-role = "content>
  <label for = "liquorList"> Liquors Categories </label>
  <select data-bind= "options:liqList, 
                      optionsText: 'descitem', 
                      optionsValue: 'iditem', 
                      optionsCaption: 'Choose..', 
                      value: selectedCategory"  name="liquorList"></select>
  <label for = "productList"> Especific Products </label>
  <select data-bind= "options: productList, 
                      optionsText: 'descitem', 
                      optionsValue: 'iditem', 
                      optionsCaption: 'Choose..', 
                      value: selectedProduct"  name="productsList"></select>
</div> 

-- 我的 viewModel 概述--

$(document).ready(function(){
    /* This is inside a function and retrieves 
       the data to fill the liquorList */  
    $.ajax({
        type : 'GET',
        url : url
        //some code to complete it
    });

    /* Here lies my doubt */
    /* Url is being built up based 
       upon the selectedOption's iditem in the liquorList */
    $.ajax({
        type : 'GET',
        url : url + iditem,
        //some code to complete it
    }); 

我已经在 sessionStorage 上设置了任何选项更改时的 iditem 值 (onchange = "saveIdItem()")，并且它有效。然后，我应该从 sessionStorage 获取此 IDITEM，以根据该值完成我的第二个 url。但我什至不知道什么事件或在哪里设置选项来检索它。

例如:

如果 -> 第一个列表中有“朗姆酒、伏特加酒、 Wine ” 如果选择“朗姆酒”，我从我正在使用的网络服务获得的 JSON 应该只包含与朗姆酒相关的数据，如下所示...“Appleton、Bacardi、Malibu”，这意味着它会根据您首先选择的内容而变化.

有什么特别的事件可以做到这一点吗？ onblur、onchange 所有这些东西都可以获取第一个列表的值，但第二个列表不会自动更改。我应该怎么办 ？希望对各位同事有所帮助。

/************************************************ **********************************************/ 编辑:2014 年 7 月 6 日

在 @Kristof 爵士发表评论后，我的代码已变成这样......

 $(document).ready(function(){
    /* This is inside a function and retrieves 
       the data to fill the liquorList */          

    $.ajax({
        type : 'GET',
        url : url
        //some code to complete it

        return liquorServerSideData;
    });

    function appViewModel(){

      this.liquorList = ko.observableArray(liquorServerSideData)
      this.productList = ko.observableArray([]);

    /* Here lies my doubt */
    /* Url is being built up based 
       upon the selectedOption's iditem in the liquorList */

    appViewModel.liquorList.subscribe(function(newValue){
     if(newValue){
      $.ajax({
          type : 'GET',
          url : url + iditem,
          //some code to complete it
          return productServerSideData;
       });
          ko.observableArray(productServerSideData);
       } 

     } // appViewModel ends

     ko.applyBindings( new appViewModel() );

Answer 1

如果我理解正确，您应该能够订阅 selectedCategory observable。这样，当它的值发生变化(也称为选择更改)时，您可以通过 json 调用使用react并更改您的productList observableArray。
您的代码可能如下所示:

myViewModel.selectedCategory.subscribe(function(newValue) {
    $.ajax({
        type : 'GET',
        url : url
        //some code to complete it
    });
});