以下のHTMLを用意します。(値を3つだけ表示することが通常より特殊)
<div data-bind="foreach:{data:users, as:'user'}">
<p data-bind="text:name"></p>
<!-- 3つだけ表示 -->
<ul data-bind="foreach:new Array(3)">
<li data-bind="text:user.scores()[$index()]||0"></li>
</ul>
</div>
次に、基本的なデータやメソッドを作成し、バインドします。
ko.applyBindings vm = new class
constructor: ->
@users = ko.observableArray([])
@createUser = -> new class
constructor: (name='')->
@name = ko.observable(name)
@scores = ko.observableArray([100])
そして、適当なデータを作成します。
user = vm.createUser()
user.name('takeshi')
user.scores.push(200)
vm.users.push(user)
プログラムが動き出してから3秒後にobservableArray内のデータの中身を書き換えます。
setTimeout ->
vm.users()[0].scores()[0] = 999
vm.users()[0].scores()[2] = 300
# vm.users()[0].scores.push()
, 3000
データの内容が書き換わったため、htmlのli要素の内容が書き換わると思っているのですが、何故か書き換えることができません。
コメントアウトしているvm.users()[0].scores.push()を実行すると、observableArrayの内容更新が検出されるためかデータが反映されます。
この方法で反映されるため、特に問題ないのかもしれませんが、普通のやり方とは違うと思ったので質問しました。
このような場合どのようにデータを更新すればよいのでしょうか。
こちらにサンプルコードを用意させていただきました。