使用新数据Knockout.js更新html

Question

我正在使用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>

Answer 1

在代码中,每次调用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); 
   });
}