нокаутом каскадирование выпадающего списка

Question

У меня есть два выпадающих списка в зависимости от другого (каскадный). Выбор в разделе «MainCategories» определяет элементы для «SubCategories». Кроме того, выбор в «MainCategories» также определяет видимость строки таблицы. Ниже я попытался:

<table> 
    <tbody data-bind="foreach: contacts"> 
     <tr> 
      <td>MainCategories: 
       <select data-bind='options: MyCategories, value: mycategory, optionsText: "Type", optionsValue: "Type",optionsCaption: "Select..."'></select> 
      </td> 
      <td> 
       <!-- ko with: mycategory -->SubCategories: 
       <select data-bind='options: Categories, optionsText: "Category", optionsCaption: "Select...", value: $parent.product'></select> 
       <!-- /ko --> 
      </td> 
     </tr> 
     <tr data-bind="visible:mycategory()=='Type1'"> 
      <td>I am visible</td> 
     </tr> 
    </tbody> 
</table> 

<script type = "text/javascript" > 
    var MyCategories = [{ 
     "Categories": [{ 
      "Category": "Category1" 
     }, { 
      "Category": "Category2" 
     }], 
     "Type": "Type1" 
    }, { 
     "Categories": [{ 
      "Category": "Category3" 
     }, { 
      "Category": "Category4" 
     }], 
     "Type": "Type2" 
    }]; 
    var initialData = [{ 
     category: "Mobile", 
     product: "Nokia" 
    }]; 

    var ContactsModel = function (contacts) { 
     var self = this; 
     self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function (contact) { 
      return { 
       mycategory: ko.observable(contact.category), 
       product: ko.observable(contact.product) 
      }; 
     })); 

    }; 

    ko.applyBindings(new ContactsModel(initialData)); 
</script> 

Если удалить optionsValue: «Типа», то «подкатегории» получают право пунктов. Но видимость строки таблицы не работает должным образом. Если у меня есть optionsValue: «Type», то «SubCategories» не заполняется. А также, когда я меняю опции «MainCategories» 1 или 2 раза, тогда только видимость работает нормально.

Пожалуйста, помогите мне найти то, что я делаю неправильно здесь. Спасибо,

Answer 1

Я прочитал ваш вопрос и у меня есть ощущение, что это будет отвечать, если не решить ее достаточно того, что вы можете применить его -

* проблема * -

Вы должны иметь каскадное выпадающее меню с помощью нокаута, чтобы выбрать значение и установить наблюдаемое равным выбранному объекту выбранного дочернего элемента.

* Решение * -

Используйте вычислен, чтобы сделать второй выпадающий зависимым от первого. Пример -

var selectedParent = ko.observable(); 

var parentCategories = ko.observableArray(MyCategories); 

var childCategories = ko.computed(function() { 
    if (!selectedParent()) { return new Array(); } 
    var childArray = []; 
    // get the values you want for the child here 
    return childArray; 
}); 

Добавляя, если вы делаете childCategories зависит от selectedParent (selectedParent (!)). Всякий раз, когда выбор изменяет, childCategories будет автоматически обновляться.

Тогда ваш взгляд может быть что-то вроде этого -

<td>MainCategories: 
       <select data-bind='options: parentCategories, value: selectedParent, optionsText: "Type", optionsValue: "Type",optionsCaption: "Select..."'></select> 
      </td> 
      <td> SubCategories: 
       <select data-bind='options: childCategories, optionsText: "Category", optionsCaption: "Select...", value: $parent.product'></select> 
       <!-- /ko --> 
      </td>