Knockoutjs模板：通过某些属性过滤数组后，如何将1个对象数组用于2个DOM元素？

麦可

我有一个模板，一个名为“ employees”的“ bindingHandler”和一个“雇员数组”。

我想在2个不同的元素中使用相同的雇员对象数组（用于模板），但是每个元素都具有数组的不同数据。

例如：我有一组员工（我是从服务器上获得的），如下所示：

var employees = [
        { FirstName: 'John', LastName: 'John', JobTitleCode: 101 },
        { FirstName: 'Guest', LastName: 'Guest', JobTitleCode: 15 },
        { FirstName: 'David', LastName: 'David', JobTitleCode: 300 },
        { FirstName: 'Ryan', LastName: 'Ryan', JobTitleCode: 300 },
        { FirstName: 'Alex', LastName: 'Alex', JobTitleCode: 10 },
        { FirstName: 'Michael', LastName: 'Michael', JobTitleCode: 101 }
    ];

我的HTML像这样：

<div>
  <b>Job title code 101</b>
  <div data-bind="employees: { employeesModel: Employees, jobTitleCode: 101 }" />
</div>

<br/>

<div>
  <b>Job title code 300</b>
  <div data-bind="employees: { employeesModel: Employees, jobTitleCode: 300 }" />
</div>

我需要所有在第一个div元素上具有JobTitleCode 101的员工，以及在第二个div元素上具有JobTitleCode 300的员工。

这是我的模板和绑定处理程序：

(function () {
	
	ko.employeeModel = function (config) {
		var self = this;
		self.Exclude = config.exclude || [];
		self.AllEmployees = config.employees;

		self.Employees = ko.pureComputed(function () {
			return ko.utils.arrayFilter(self.AllEmployees, function (employee) {
				return $.inArray(employee.JobTitleCode, self.Exclude) == -1;
			});
		});
	};

	var templateEngine = new ko.nativeTemplateEngine();

	templateEngine.addTemplate = function (templateName, templateMarkup) {
		document.write("<script type='text/html' id='" + templateName + "'>" + templateMarkup + "</script>");
	};

	templateEngine.addTemplate("ko_employees", "\
                                <div data-bind=\"foreach: Employees\">\
                                    <div>\
                                        <label data-bind=\"text: FirstName\"></label>\
                                        <label data-bind=\"text: LastName\"></label>\
										<label data-bind=\"text: JobTitleCode\"></label>\
                                    </div>\
                                </div>");

	ko.bindingHandlers.employees = {
		init: function () {
			return { 'controlsDescendantBindings': true };
		},

		update: function (element, valueAccessor, allBindings) {
			var accessor = valueAccessor();
			var viewModel = accessor.employeesModel ? accessor.employeesModel : accessor;
			var jobTitleCode = accessor.jobTitleCode ? accessor.jobTitleCode : 0;

			while (element.firstChild) {
				ko.removeNode(element.firstChild);
			}

			var attachmentsTemplateName = "ko_employees"

			var employeesContainer = element.appendChild(document.createElement("div"));
			ko.renderTemplate(attachmentsTemplateName, viewModel, { templateEngine: templateEngine }, employeesContainer, "replaceNode");
		}
	};
})();

最后是viewmodel：

var vm = function (employeeArr) {
        var self = this;
        self.Employees = new ko.employeeModel({
            exclude: [10, 15],
            employees: employeeArr
        });
    }

    // data from server
    var employees = [
        { FirstName: 'John', LastName: 'John', JobTitleCode: 101 },
        { FirstName: 'Guest', LastName: 'Guest', JobTitleCode: 15 },
        { FirstName: 'David', LastName: 'David', JobTitleCode: 300 },
        { FirstName: 'Ryan', LastName: 'Ryan', JobTitleCode: 300 },
        { FirstName: 'Alex', LastName: 'Alex', JobTitleCode: 10 },
        { FirstName: 'Michael', LastName: 'Michael', JobTitleCode: 101 }
    ];

    var emloyeeVm = new vm(employees);
    ko.applyBindings(emloyeeVm);

谢谢！

耶罗恩

自定义绑定处理程序不是您所需的恕我直言的正确工具。自定义绑定处理程序旨在处理特殊的DOM交互，例如，创建弹出组件或日期选择器。您正在重新创建foreach绑定，并在其中进行视图模型逻辑。

这是一个替代方法。关键是使用computed可观察对象获得单独的列表：

var vm = function (employeeArr) {
  var self = this;
  var exclude = [10, 15];
  
  self.employees = ko.observableArray(employeeArr);
  
  self.groups = ko.computed(function() {
    var groups = [], result = [];
    self.employees().forEach(function(e) {
      if (exclude.indexOf(e.JobTitleCode) < 0) {
        if (!groups.hasOwnProperty(e.JobTitleCode)) {
          groups[e.JobTitleCode] = { key: e.JobTitleCode, people: [] };
          result.push(groups[e.JobTitleCode]);
        }
        groups[e.JobTitleCode].people.push(e);
      }
    });
    return result;
  });
}

// data from server
var employees = [
  { FirstName: 'John', LastName: 'John', JobTitleCode: 101 },
  { FirstName: 'Guest', LastName: 'Guest', JobTitleCode: 15 },
  { FirstName: 'David', LastName: 'David', JobTitleCode: 300 },
  { FirstName: 'Ryan', LastName: 'Ryan', JobTitleCode: 300 },
  { FirstName: 'Alex', LastName: 'Alex', JobTitleCode: 10 },
  { FirstName: 'Michael', LastName: 'Michael', JobTitleCode: 101 }
];

var emloyeeVm = new vm(employees);
ko.applyBindings(emloyeeVm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<script type="text/html" id="group101">
  <b data-bind="text: key"></b>
  <div data-bind="foreach: people">
    <div>
      <span data-bind="text: FirstName"></span>
      <span data-bind="text: LastName"></span>        
    </div>
  </div>
</script>

<script type="text/html" id="group300">
  <b data-bind="text: key"></b>
  <ul data-bind="foreach: people">
    <li>
      <span data-bind="text: FirstName"></span>
      <span data-bind="text: LastName"></span>        
    </li>
  </ul>
</script>

<!-- ko foreach: groups -->
<hr>
<div data-bind="template: 'group' + key"></div>
<!-- /ko -->

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。