ko.observableArray() を ko.observableArray() で管理した

Question

データバインディングが便利でknockoutを利用しています。

配列の中にさらに配列があり、と2段階（できれば3段階）まで分類を考えています。

class vmFirst
    constructor: ->
      @data = ko.observableArray()

class vmSecond
    constructor: ->
      @id = ko.observable()
      @data = ko.observableArray()

First = new vmFirst();
Second = new vmSecond();

ko.applyBindings({
	First
	Second
})

Second.id(0)
Second.data([0,1,2,3])

First.data.push( Second )

Second.id(1)
Second.data([4,5,6,7])

First.data.push( Second )

上記のようなコードの場合は、Firstには2つのdataが管理されますが、
どちらも後で追加した id=1,data=[4,5,6,7]に書き換えられます。

objectで参照しているからそうなることは何となく分かるのですが、
どうすれば別々なものとして管理することができるのかがわかりません。

運用においては、Secondが生成される数は固定ではないため、
予め必要な数だけNewと作ってapplyBindings内に設定するということもできません。

knockoutjsの使い方というよりもjavascriptのobjectの扱い方のような気がします。
でもapplyBindingsで宣言しなければならないし…というところで詰まっています。

よろしくお願いします。

Answer 1

まだ深く読みきれていませんが、ここの事例が役に立ちそう
http://kojs.sukobuto.com/tips/contactsEditor

viewModel内で追加をすることで持つことができるようです。