2

以下の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の内容更新が検出されるためかデータが反映されます。

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

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

こちらにサンプルコードを用意させていただきました。

1 件の回答 1

1

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

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。