KnockoutJS foreach不会遍历集合

Question

由于某些原因，foreach中的Knockout.js不会遍历我的可观察数组。

在我的HTML中，它具有可观察模型的完美效果：

<div class="field-group">
    <label class="popup-label" for="email">Email</label>
    <span class="email" data-bind="text: masterVM.employeeVM.Email"></span>
</div>

但是在同一模型中，此代码不起作用：

<ul data-bind="foreach: { data: masterVM.employeeVM.Tags, as: 'tag' }">
    <li>
        <span class="popup-tag" data-bind="text: tag.tagName"><i class="zmdi zmdi-delete"></i></span>
    </li>
</ul>

有两个模型：

Employee

var observableEmployee = function(id, email, tags) {
    var self = this;

    self.Id = ko.observable(id);
    self.Email = ko.observable(email); 

    self.Tags = ko.observableArray(ko.utils.arrayMap(tags, function(item) {
        return new observableTag(item.Id, item.EmployeeId, item.TagId, item.tagName)
    }));

    self.errors = ko.validation.group(this, {
        deep: true
    });

    self.isValid = ko.computed(function() {
        return self.errors().length > 0 ? false : true;
    });
}

和标签

var observableTag = function(id, employeeId, tagId, tagName) {
    var self = this;

    self.Id = ko.observable(id);
    self.employeeId = ko.observable(employeeId);
    self.tagId = ko.observable(tagId);
    self.TagName = ko.observable(tagName);

    self.errors = ko.validation.group(this, {
        live: true
    });

    self.isValid = ko.computed(function() {
        return self.errors().length > 0 ? false : true;
    });
}

和处理程序功能：

var employeeHandler = function () {
var self = this;

self.getEmployeeDetails = function (header) {
    $.ajax({
        url: masterVM.controller.renderEmployeeDetails,
        dataType: 'json',
        contentType: 'application/json',
        type: 'POST',
        data: JSON.stringify({ id: header.data("employeeid") }),
        success: function (result) {                

            masterVM.employeeVM = new observableEmployee(
                result.model.Id,
                result.model.Email,
                result.model.Tags
            );
            ko.applyBindings(masterVM, $("#employee-planning-selected")[0]);

            //header.parent().addClass('open');
            //header.next().slideDown('normal');

            //hideLoader(header);
            console.log('get employee details');
            $(document).on('click', "div.employee", onNameCardClick);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Error!');
        }
    });

}}

在我的HTML文件中

    <script>
        masterVM = {
            controller: {
                renderEmployeeDetails: '@(Html.GetActionUrl<EmployeesController>(c => c.RenderEmployeeDetails(0)))'
            },
            employeeHandler: new employeeHandler(),
            employeeVM: new observableEmployee(0, '', '', '', '')
    }
    ko.applyBindings(masterVM);
</script>

尝试过类似的操作，但还是一无所获

<!--ko foreach: employeeVM.Tags -->
    <span data-bind="text: $data.Tags"></span>
<!-- /ko -->

而且，控制台中没有错误，我使用了KnockouJS上下文调试器，该调试器向我显示了此集合中的元素，即使当我尝试将它们显示为对象时，它也会向我显示一个列表4个元素。

淘汰赛版本：2.3.0

Answer 1

1）。如果要在masterVM中绑定ko.applyBindings(masterVM)对象，则无需在数据绑定中再次指定该对象。

所以应该是

foreach: { data: employeeVM.Tags, as: 'tag' }

不是

foreach: { data: masterVM.employeeVM.Tags, as: 'tag' }

（（我不确定第一个data-bind="text: masterVM.employeeVM.Email"的工作方式）

2）。您不需要多次呼叫applyBindings。如果要更新员工对象，可以将employeeVM变为可观察对象，并继续在getEmployeeDetails方法中对其进行更新。

3）您的containerless control flow syntax不起作用。 （<!--ko foreach: employeeVM.Tags -->）。在此foreach中，$data是当前Tag对象in context。因此，应为<span data-bind="text: $data.TagName"></span>

这是代码的最低版本。点击“运行代码段”进行测试。当您单击Update employee按钮时，我正在更新employeeVM可观察到的数据，并再次渲染数据。无需再次调用applyBindings

var employeeHandler = function() {
  var self = this;

  self.getEmployeeDetails = function(header) {
    var newEmployee = new observableEmployee(0, '[email protected]', [{
      Id: 3,
      EmployeeId: 3,
      TagId: 3,
      tagName: 'Tag Name 3'
    }]);
  
   // You need to use employeeVM(newEmployee) instead of employeeVM = newEmployee
   // Because employeeVM is an observable.
    masterVM.employeeVM(newEmployee);
  }
}

var observableEmployee = function(id, email, tags) {
  var self = this;

  self.Id = ko.observable(id);
  self.Email = ko.observable(email);

  self.Tags = ko.observableArray(ko.utils.arrayMap(tags, function(item) {
    return new observableTag(item.Id, item.EmployeeId, item.TagId, item.tagName)
  }));
}

var observableTag = function(id, employeeId, tagId, tagName) {
  var self = this;

  self.Id = ko.observable(id);
  self.employeeId = ko.observable(employeeId);
  self.tagId = ko.observable(tagId);
  self.TagName = ko.observable(tagName);
}

var masterVM = {
  controller: {
    renderEmployeeDetails: ''
  },
  employeeHandler: new employeeHandler(),
  // change this to an observable
  employeeVM: ko.observable(new observableEmployee(0, '[email protected]', [{
    Id: 1,
    EmployeeId: 1,
    TagId: 1,
    tagName: 'Tag name 1'
  }]))
}

ko.applyBindings(masterVM);

document.getElementById("button").addEventListener("click", function(e) {
  masterVM.employeeHandler.getEmployeeDetails()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="field-group">
  <label class="popup-label" for="email">Email:</label>
  <span class="email" data-bind="text: employeeVM().Email"></span>
</div>

<ul data-bind="foreach: { data: employeeVM().Tags, as: 'tag' }">
  <li>
    <span class="popup-tag" data-bind="text: tag.employeeId"></span> <br>
    <span class="popup-tag" data-bind="text: tag.tagId"></span><br>
    <span class="popup-tag" data-bind="text: tag.TagName"></span>
  </li>
</ul>

<button id="button">Update employee</button>