使用ko.mapping插件时，IF绑定未按预期工作

IF binding not working as expected when using ko.mapping plugin

本文关键字：工作 绑定 IF mapping ko 插件 使用      更新时间：2023-09-26

我创建了两个JSFiddle示例，用于使用knockout.js.映射数据

（1）http://jsfiddle.net/9nn2qpp8/没有ko.mapping插件

var ViewModel = function() {
    var self = this;
    this.entries = [
        { name: "one", type: "file" },
        { name: "two", type: "folder" },
        { name: "three", type: "file" }
    ];
};
ko.applyBindings(new ViewModel());

（2）http://jsfiddle.net/q49vfy6q/使用ko.mapping

var data = {entries: [
    { name: "one", type: "file" },
    { name: "two", type: "folder" },
    { name: "three", type: "file" }
]};
var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);

为什么（2）在if绑定的评估方面与（1）的工作方式不同？

映射插件会自动将所有内容包装为可观察对象-您需要在if绑定中这样对待它们：

<!-- ko if: type() !== "file" -->

而不是：

<!-- ko if: type !== "file" -->

工作小提琴

因为当您使用映射时，您可以将每个属性转换为可观察的属性。

每个可观察的属性都是一个函数，因此您需要执行该函数来返回里面的值。

请在此处查看它的工作情况：http://jsfiddle.net/q49vfy6q/1/

<table> <tbody data-bind="foreach: entries()"> <tr> <td> <!-- ko if: type() === "file" -->

实际上根本不需要使用mapping。您可以将data直接传递到applyBindings():

var data = {entries: [
    { name: "one", type: "file" },
    { name: "two", type: "folder" },
    { name: "three", type: "file" }
]};
ko.applyBindings(data);

JSFiddle演示。

相关文章：