Knockoutjs选择与子元素数组绑定是可能的吗？

Question

我需要显示像这种数据结构的子元素

这是一种表单结构，不适用于下拉选择

HTML：

Select activitie for edit.
<select data-bind="options: items.activities(), value: selecActivitie, optionsText: 'aname'"></select>
<div data-bind="with: selecActivitie">
    activitie name:<input type="text" data-bind="value: aname"><br>
    tasks
    <ul data-bind="foreach: activities.tasks()">                
      <li><input type="text" data-bind="value: tname"></li>
      <li><input type="text" data-bind="value: tvalue"></li>
    </ul>                  
</div>

Mi viewmodel

function Result(rname,activities){
     var self = this;     
     self.rname  = ko.observable(rname);     
     self.activities   = ko.observableArray(activities);
 }
 function Activitie(aname,tasks){
     var self = this;
     self.aname = ko.observable(aname);
     self.tasks = ko.observableArray(tasks);
 }
 function Task(tname,tvalue){
    var self = this;
    self.tname  = ko.observable(tname);
    self.tvalue = ko.observable(tvalue);

 }
 function sampleViewModel() {
    this.selectedItem = ko.observable();
    this.selecActivitie = ko.observable();

    this.items = ko.observableArray([
           new Result("result1",[new Activitie("activitie 1.1",[new Task("task 1.1.1","10"),new Task("task 1.1.2","11")]),new Activitie("activitie 1.2",[new Task("task 1.2.1","50"),new Task("task 1.2.2","10")])]),
           new Result("result2",[new Activitie("activitie 2.1",[new Task("task 2.1.1","10"),new Task("task 2.1.2","11")]),new Activitie("activitie 2.2",[new Task("task 2.2.1","50"),new Task("task 2.2.2","11")])]),
           new Result("result3",[new Activitie("activitie 3.1",[new Task("task 3.1.1","10"),new Task("task 3.1.2","11")]),new Activitie("activitie 3.2",[new Task("task 3.2.1","50"),new Task("task 3.2.2","12")])])]);
    this.addplataform = function() {
        this.items.push(new Result());
    };   
};


var sampleVM = new sampleViewModel();

ko.applyBindings(sampleVM);

我需要这种结构：

  activitie 1.1
  activitie 1.2
  activitie 2.1// whit dropdowns select and display child elements of this 
  activitie 2.2 //element

   --task 1.1 //display element to selected activitie, example 1.1, for edith
   --task 2.1
   --task 3.1

小提琴演示： http://jsfiddle.net/n82penky/1/ 感谢

Answer 1

我认为您正在寻找$parent和$root关键字。使用这些关键字，您可以访问父上下文和根上下文 因此，活动的select应该是

    <select data-bind="options: activities, optionsText, optionsText: 'aname',
       value: $parent.selecActivitie, optionsCaption: 'Choose activity...'">                
    </select>  

JSFiddle DEMO

演示代码：
的 HTML：

<select data-bind="options: items, value: selectedItem, optionsText: 'rname', optionsCaption: 'Choose...'"></select>
<div data-bind="with: selectedItem">
    Name:<strong data-bind="text: $data.rname"></strong> 
    <br/>
            <select data-bind="options: activities, optionsText, optionsText: 'aname',
               value: $parent.selecActivitie, optionsCaption: 'Choose activity...'">                
            </select>
            <div data-bind="with: $parent.selecActivitie">
            Name:<strong data-bind="text: $data.aname"></strong> 
            <br/>
            <select data-bind="options: tasks, optionsText, optionsText: 'tname',
               value: $root.selectedTask, optionsCaption: 'Choose task...'">                
            </select>
            <div data-bind="with: $root.selectedTask">
                Name:<strong data-bind="text: $data.tname"></strong> 
            </div>

</div>
</div>  

Javascript

 function Result(rname,activities){
     var self = this;     
     self.rname  = ko.observable(rname);     
     self.activities   = ko.observableArray(activities);
 }
 function Activitie(aname,tasks){
     var self = this;
     self.aname = ko.observable(aname);
     self.tasks = ko.observableArray(tasks);
 }
 function Task(tname,tvalue){
    var self = this;
    self.tname  = ko.observable(tname);
    self.tvalue = ko.observable(tvalue);

 }
 function sampleViewModel() {
    this.selectedItem = ko.observable();
    this.selecActivitie = ko.observable();
    this.selectedTask = ko.observable();

    this.items = ko.observableArray([
           new Result("result1",[new Activitie("activitie 1.1",[new Task("task 1.1.1","10"),new Task("task 1.1.2","11")]),new Activitie("activitie 1.2",[new Task("task 1.2.1","50"),new Task("task 1.2.2","10")])]),
           new Result("result2",[new Activitie("activitie 2.1",[new Task("task 2.1.1","10"),new Task("task 2.1.2","11")]),new Activitie("activitie 2.2",[new Task("task 2.2.1","50"),new Task("task 2.2.2","11")])]),
           new Result("result3",[new Activitie("activitie 3.1",[new Task("task 3.1.1","10"),new Task("task 3.1.2","11")]),new Activitie("activitie 3.2",[new Task("task 3.2.1","50"),new Task("task 3.2.2","12")])])]);
    this.addplataform = function() {
        this.items.push(new Result());
    };   
};


var sampleVM = new sampleViewModel();

ko.applyBindings(sampleVM);