Knockout Js 选择与子元素数组绑定有可能吗？答案

【问题标题】：Knockoutjs select binding with child elements array its posible?Knockout Js 选择与子元素数组绑定有可能吗？
【发布时间】：2014-10-26 07:11:22
【问题描述】：

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

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

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>

小米视图模型

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/ 谢谢

【问题讨论】：

“此代码不起作用”？请确保在发布之前进行调试，告诉我们您的尝试和发现，reduce the code as much as possible 等。
非常不清楚问题出在哪里，但对于树来说，最好使用模板，这样您就可以有一个递归的 viewmdodel 和视图

标签： javascript arrays knockout.js nested

【解决方案1】：

我认为您正在寻找 $parent 和 $root 关键字。使用这些关键字，您可以访问父上下文和根上下文。
所以你的select activities 应该看起来像

    <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);

【讨论】：