Knockoutjs点击绑定<option>元素是否正确？

Question

我只显示来自嵌套项目的子项目，我需要显示来自选定项目的输入项目的下拉菜单。 此代码适用于Firefox和谷歌浏览器不起作用。 HTML：

<select data-bind="foreach:items ">    
    <!-- ko foreach: activities() --> 
    <option data-bind="click:$root.selectedAct ,text: aname"></option>> 
    <!-- /ko -->   
    </select> 
    <div data-bind="with:selectedAct"> 
     <h4>tasks from selected activitie </h4>   
      <!-- ko foreach: tasks -->   
       <input type="text" data-bind="value:tname"><br> 
      <!-- /ko -->   
     <textarea data-bind='value: ko.toJSON(tasks)' rows='5' cols='60'></textarea><br> 
    </div> 
<textarea data-bind='value: ko.toJSON($root)' rows='5' cols='60'></textarea> 

视图模型：

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.selectedAct = 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 Task("task 1.1.3","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); 

小提琴：http://jsfiddle.net/xyvLp3a7/3/

Answer 1

不要手动建立你的选项，然后单击处理程序不工作，你觉得它的方式。

使用选择元素上的选项，选项文本和值绑定 使用计算来将分层数据结构展平以呈现为单个数组。

---

HTML

<select data-bind="options: allActivities, optionsText: 'aname', value:selectedAct"></select> 

---

的Javascript

this.allActivities = ko.computed(function() { 
    var result = []; 
    this.items().forEach(function(item) { 
     return result.push.apply(result, item.activities()); 
    }); 

    return result; 
}, this);