使用新数据Knockout.js更新html

时间:2011-12-19 02:50:50

标签: knockout.js

我正在使用getJson

检索新数据
    function getDaysMeals(dayid)
    {           
        $.getJSON('jsonchoose/'+ dayid +'', function(data) {
                var viewModel = {
                    dayMeals: ko.observableArray(data)
                };
                ko.applyBindings(viewModel);
            });

    }

我点击事件以使用'dayid'触发$ .getJson以获取新数据。

我正在尝试使用新数据更新表格 - 目前它每次都会添加到现有数据中。

  <table>
<tbody data-bind="foreach: dayMeals">
  <tr>
    <td data-bind="text: description" class="display-meal"></td>
    <td data-bind="text: measure" class="display-meal"></td>
    <td data-bind="text: total_cal" class="display-meal"></td>
  </tr>
</tbody>

1 个答案:

答案 0 :(得分:5)

在代码中,每次调用getJSON()时都会调用applybindings。

您应该只调用一次applybindings。您可以将applyBindings()移动到初始化位置或仅有条件地调用它一次。

//Make necessary changes as per your requirement.
var viewModel;

function onLoad()
{
 viewModel = { dayMeals: ko.observableArray([]) };
 ko.applyBindings(viewModel);
}

function getDaysMeals(dayid)
{           
  $.getJSON('jsonchoose/'+ dayid +'', function(data) {
  // This is just for reference. Minor change may be required.
   viewModel.dayMeals(data); 
   });
}