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

不要手动构建您的选项，点击处理程序也不会按照您的想法运作。

对select元素使用options，optionsText和value绑定使用computed来展平分层数据结构以呈现为单个数组。

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

来自<option>元素的Knockoutjs点击绑定是否正确？</option>

1 个答案: