ノックアウトネストされたobservableArraysは、空ではなく未定義に見えます。

Question

空の配列（[]）で初期化されたネストされたobservableArraysに集約関数を適用すると、内部配列が未定義であるというエラーが発生します。これは空の配列をパラメータとして構築されたobservableArrayオブジェクトに対してのみ発生します。

これはバグかもしれませんが、うまくいけば、私はちょっとしたことがありません。

以下の例は、空の配列ラインで動作コメントアウト：

をも上：http://jsfiddle.net/adamtolley/4pZhR/32/

HTML：

<ul data-bind="template: { name: 'outerTmpl', foreach: outerArray}"></ul> 
Number of inner items: <span data-bind="text: innerCount"></span> 
<hr /> 

<div data-bind="text: ko.toJSON(viewModel)"></div> 

<script id="outerTmpl" type="text/html"> 
    <li> 
     <span data-bind="text: name"></span> 
     <ul data-bind="template: { name: 'innerTmpl', foreach: innerArray}"></ul> 
    </li> 
</script> 

<script id="innerTmpl" type="text/html"> 
    <li> 
     <span data-bind="text: name" /> 
    </li> 
</script> 

JS：

function outer(name, innerArray) { 
    return { 
     name: ko.observable(name), 
     innerArray: ko.observableArray(innerArray) 
    }; 
} 

function inner(name) { 
    return { 
     name: ko.observable(name) 
    }; 
} 

var viewModel = { 
    outerArray: ko.observableArray([ 
     new outer("outer1", [new inner("inner1"), new inner("inner2")]), 
     new outer("outer2", [new inner("inner1"), new inner("inner2")]) //, 
     // new outer("outer3", []) //does not work with this line uncommented. 
    ]) 
}; 

//use of innerArray().length vs innerArray.length seems to make no difference in error 
viewModel.innerCount = ko.dependentObservable(function() { 
    return this.outerArray().reduce(function(i, j) { 
     return i.innerArray.length + j.innerArray.length; 
    }); 
}, viewModel); 


ko.applyBindings(viewModel); 

Answer 1

私は思いますあなたはもっと好きなものを望むだろう：

viewModel.innerCount = ko.dependentObservable(function() { 
    return this.outerArray().reduce(function(i, j) { 
     var count = i.innerArray ? i.innerArray().length : i; 
     return count + j.innerArray().length; 
    }); 
}, viewModel); 

reduceは、次の繰り返しで前の結果をiとして渡します。したがって、最初の反復では2つの配列しか持たない。