knockoutjsに関して

いつもお世話になっております。
knockoutjsに関してご教授お願いしたいです。

ユーザー一覧画面を出し、その中にあるフォローボタンを押すとフォローのステータスが変更されるviewを使用しています。
ただ、なぜかko.observableArray(user_list)の中身がobservableになっておらず、中身を書き換えてもどうにもならない状態です。

何か少し勘違いしている気がしているのですがどうすればisFollowedByMeをobservableしてくれるようになるのでしょうか。。。
ご教授お願いいたします。

以下、検証用のhtmlでございます。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <title>knockout</title>
5  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
6</head>
7<body>
8  <div class="users" id="jsUsers">
9    <!-- ko foreach: all -->
10      <div class="user">
11        <div data-bind="text: isFollowedByMe ? 'このユーザーはフォロー済みです' : 'このユーザーはまだフォローしていません'"></div>
12        <div class="use-name" data-bind="text: name"></div>
13        <div class="user-sex" data-bind="text: sex"></div>
14        <button data-bind="click: $root.follow, text: isFollowedByMe ? 'フォロー済み': 'フォロー' "></button> <!-- 同じ階層 -->
15      </div>
16    <!-- /ko -->
17  </div>
18  <script>
19    var user_list = [
20      { userId: 2, name: '田中', sex: '男', isFollowedByMe: false },
21      { userId: 3, name: '佐藤', sex: '男', isFollowedByMe: false}
22    ]
23    var Users = function(){
24      this.all = ko.observableArray(user_list);
25      this.follow = function(data, event){
26        var _currentFollowStatus = data.isFollowedByMe;
27        
28        data.isFollowedByMe(!_currentFollowStatus);
29      }
30    }
31
32    var users = new Users();
33
34    ko.applyBindings(users, document.getElementById('jsUsers'));
35  </script>
36</body>
37</html>
38

行動規範の内容に同意します

回答1件

ベストアンサー

user_list[].isFollowdByMeがobservableになってないからですかね。

javascript
1{ userId: 2, name: '田中', sex: '男', isFollowedByMe: ko.observable(false) },

参照している箇所の isFollowedByMe を変更して isFollowedByMe() にしたら値が取れるはずです。

投稿2016/08/18 07:12

kodai

総合スコア759

MasakazuFukami

2016/08/18 07:14

回答ありがとございます。やはりそうなりますよね。。。配列をobservable指定たので配列の中身のハッシュの値までovservableにしてくれないかなぁって思ってました(´；ω；｀) knockoutにはmappingというプラグインがあってそれを使用するとネストした配列の中身まで監視してくれるようになるようなのでそちらを使うことにしました！ありがとうございます！

行動規範の内容に同意します