0

以下のようなjson形式で返されるデータを取得するためにajax呼び出しを使用しています。

{ "d" : [ 
  { "Goal" : "Some one client",
    "GoalID" : 1,
    "IsPublic" : true,
    "MemberName" : "user1"
  },                                         
  { "Goal" : " this is goal",
    "GoalID" : 1,
    "IsPublic" : false,
    "MemberName" : "user2"
  },           
  { "Goal" : "Get call",
    "GoalID" : 4,
    "IsPublic" : true,
    "MemberName" : "user2"
  }
] }

今私のhtmlページで、ユーザーごとに個別のテーブルを作成したいと考えています。これが私のテーブルです

//want username here then table for goal of that user 
<table>
  <thead>
     <tr class="headerRow">
      <th>member</th>
      <th>
         Goals
       </th>
        </tr>
        </thead>
      <tbody data-bind="foreach: tasks">
      <tr">
       <td>
          <span data-bind="text: members" />
        </td>
        <td>
           <span data-bind="text: goal" />
         </td>
       </tr>
      </tbody>
</table>

「タスク」は、すべての目標の詳細を含む監視可能な配列です。

これは、javascript の私の目標コンストラクターです

 function Goal(data) {
    var self = this;
    self.goalID = data.GoalID;
    self.goal = data.Goal;
    self.isPublic = ko.observable(data.IsPublic);
    self.members = ko.observable(data.MemberName);
}
4

1 に答える 1

0

最善の解決策ではないかもしれませんが、うまくいくでしょう。すべてのユーザーを返す計算結果を追加します。

self.users = ko.computed(function(){
    var list = ko.utils.arrayMap(self.tasks(), function(item){
        return item.members
    });
    return ko.utils.arrayGetDistinctValues(list);
});

foreachバインディングを使用して、各ユーザーのテーブルを作成します。

<div data-bind="foreach: users">
    <table>
      <thead>
         <tr>
          <th>membername</th>
          <th>
             Goals
           </th>
            </tr>
            </thead>
          <tbody data-bind="foreach: $parent.tasks">
          <tr data-bind="if: members == $parent">
           <td>
              <span data-bind="text: members" />
            </td>
            <td>
               <span data-bind="text: goals" />
             </td>
           </tr>
          </tbody>
    </table>
</div>

ここにフィドルが働いています：http://jsfiddle.net/TQXja/4/

于 2012-12-20T11:39:52.647 に答える