knockout.js和表格不添加新行

是否有任何理由爲什麼一行不會出現下面的JavaScript和HTML？我在我的網格對象中看到該對象，但它並未出現在表格中。難道我做錯了什麼？knockout.js和表格不添加新行

視圖模型

app.viewModel.members.eventSchedule = { 
      gyms: ko.observableArray(null), 
      grid: ko.observableArray([]), 

    . 
    . 
    .

填充初始電網從Ajax請求

function populateGrid(grid) { 

     var mapping = { 
      'Matchup': { 
       create: function (options) { 
        if (options.data) { 
         return ko.mapping.fromJS(options.data); 
        } 

        return null; 
       } 
      } 
     }; 

     viewModel.grid(ko.mapping.fromJS(grid.Dates, mapping)()); 
     viewModel.gyms(grid.Gyms); 
    }

添加新行

      var timeRow = { 
          Time: ko.observable(data.Newtime), 
          Games: ko.observableArray([]) 
         }; 

         var gymCourts = viewModel.gymCourts(); 
         for (var k = 0; k < gymCourts.length; k++) { 
          timeRow.Games.push(new Game(data.Dates, data.NewTime, gymCourts[k].Id, gymCourts[k].Order)); 
         } 

         viewModel.grid()[0].Times().push(timeRow);

表HTML

<tbody data-bind="foreach: grid"> 
           <tr> 
            <td class="empty"></td> 
            <td class="date-container" data-bind="attr: { colspan: $parent.gymCourts().length }"> 
             <div class="date" data-bind="html: Date"></div> 
            </td> 
           </tr> 
           <!-- ko foreach: Times --> 
           <tr class="time-games"> 
            <td class="time-container"> 
             <a href="#" class="time" data-bind="html: Time, click: $root.members.eventSchedule.editTime.edit.bind($data, $parent)"></a> 
            </td> 
            <!-- ko foreach: Games() --> 
            <td class="game-container draggable-item-container clearfix"> 
             <div class="game clearfix draggable-active draggable-item" data-bind="if: $data.Matchup, css: { 'empty' : !$data.Matchup, 'ui-droppable-disabled': $data.Disabled }, dynamicClass: { position: ($data.Matchup ? $data.Matchup.DivisionOrder() : 0) }, draggableGameHandler : { disabled: !$data.Matchup, disabledDrop: $data.Disabled() }"> 
              <span data-bind="html: (Matchup.PoolName() + Matchup.AwayTeam.Number())"></span> vs. <span data-bind="html: (Matchup.PoolName() + Matchup.HomeTeam.Number())"></span> 
             </div> 
            </td> 
            <!-- /ko --> 
           </tr> 
           <!-- /ko --> 
          </tbody>

來源

2012-05-27 Mike Flynn

你可以添加一個jsfiddle。 – madcapnmckay

要做很多工作。 –

選中此行：viewModel.grid（）[0] .Times（）。push（timeRow）;您正將一個新的timeRow推入數組* * observableArray中。這不會自動通知監聽者。你可以嘗試viewModel.grid（）[0] .Times.push（timeRow）;代替？ –

選中此行：viewModel.grid（）[0] .Times（）。push（timeRow）;您正將一個新的timeRow放入observableArray中的數組中。這不會自動通知監聽者。你可以嘗試viewModel.grid（）[0] .Times.push（timeRow）;代替？

來源

2012-05-28 23:08:58

knockout.js和表格不添加新行

回答

相關問題