9847


以下のHTMLを用意します。（値を３つだけ表示することが通常より特殊）

[code]

    <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>
    
[/code]

次に、基本的なデータやメソッドを作成し、バインドします。

[code]

    ko.applyBindings vm = new class
      constructor: ->
        @users = ko.observableArray([])
        @createUser = -> new class
          constructor: (name='')->
            @name = ko.observable(name)
            @scores = ko.observableArray([100])
    
[/code]

そして、適当なデータを作成します。

[code]

    user = vm.createUser()
    user.name('takeshi')
    user.scores.push(200)
    vm.users.push(user)
    
[/code]

プログラムが動き出してから３秒後にobservableArray内のデータの中身を書き換えます。

[code]

    setTimeout ->
      vm.users()[0].scores()[0] = 999
      vm.users()[0].scores()[2] = 300
      # vm.users()[0].scores.push()
    , 3000
    
[/code]

データの内容が書き換わったため、htmlのli要素の内容が書き換わると思っているのですが、何故か書き換えることができません。

コメントアウトしているvm.users()[0].scores.push()を実行すると、observableArrayの内容更新が検出されるためかデータが反映されます。

この方法で反映されるため、特に問題ないのかもしれませんが、普通のやり方とは違うと思ったので質問しました。

このような場合どのようにデータを更新すればよいのでしょうか。

[こちら](http://jsfiddle.net/869abgcy/3/)にサンプルコードを用意させていただきました。


CC BY-SA 3.0
2015-05-05T22:14:51.373
9846
2015-05-05T23:12:34.747
5840
question
coffeescript knockout.js
knockout.jsでobservableArrayのデータ更新が反映されない


`ObservableArray`が監視対象としているのはメソッドによる変更だけです。質問の例であれば、

[code]

    vm.users()[0].scores([999,200,300])
    
[/code]

と値を全て変更する、もしくは`scores`の要素自体をVMにするといった方針が良いかと思います。


CC BY-SA 3.0
2015-05-05T23:12:34.747
9847
2015-05-05T23:12:34.747
5750
9846
answer