Json KnockOutJS中的自定义视图数据绑定

我在KnockOutJS ViewModel中创建自定义字段时遇到问题

HTML

<table class="table table-striped">
    <thead><tr>
        <th>name</th><th>abb</th><th>combo</th>
    </tr></thead>
    <tbody data-bind="foreach: clients"><tr>
        <td data-bind="text: Name"></td>
        <td data-bind="text: Abbreviation"></td>
        <td data-bind="text: NameAbbreviation"></td>
    </tr></tbody>
</table>

当我不创建自定义视图字段时，我能够毫无问题地绑定所有数据

当我试图创建名称缩写自定义字段时，我得到一个错误

Error: Unable to parse bindings.
Message: ReferenceError: NameAbbreviation is not defined;
Bindings value: text: NameAbbreviation

我理解这个错误，因为KO在视图中找不到名称缩写

---

如何让KO使用/查看此自定义视图名称缩写？

当您处于

foreach

循环中时，范围是您正在循环的数组项。您的视图模型在根级别而不是在每个项目上定义了

nameAbstration

这里有几种方法可供选择

最简单的方法是在视图模型上创建一个简单函数，返回格式化字符串，并使用

$root

或

$parent

对其进行绑定

function ClientModel() {
    this.clients = ko.observableArray(data);
    this.NameAbbreviation = function (item) {
        return item.Name + " " + item.Abbreviation;
    };
};

然后，在您的UI中绑定如下：

<tbody data-bind="foreach: clients">
    <tr>
        <td data-bind="text: Name"></td>
        <td data-bind="text: Abbreviation"></td>
        <td data-bind="text: $root.NameAbbreviation($data)"></td>
    </tr>
</tbody>

否则，您可以考虑创建一个“item”构造函数，该函数添加<代码>名称缩写< /代码>，然后通过构造函数发送每个原始数据项。

---

另一个选项是使用。

当您在

foreach

循环中时，作用域是您正在循环的数组项。您的视图模型在根级别而不是在每个项目上定义了

nameAbstration

这里有几种方法可供选择

最简单的方法是在视图模型上创建一个简单函数，返回格式化字符串，并使用

$root

或

$parent

对其进行绑定

function ClientModel() {
    this.clients = ko.observableArray(data);
    this.NameAbbreviation = function (item) {
        return item.Name + " " + item.Abbreviation;
    };
};

然后，在您的UI中绑定如下：

<tbody data-bind="foreach: clients">
    <tr>
        <td data-bind="text: Name"></td>
        <td data-bind="text: Abbreviation"></td>
        <td data-bind="text: $root.NameAbbreviation($data)"></td>
    </tr>
</tbody>

否则，您可以考虑创建一个“item”构造函数，该函数添加<代码>名称缩写< /代码>，然后通过构造函数发送每个原始数据项。

---

另一种选择是使用。

名称和缩写是否为ko.observables？如果是，可以尝试：返回self.Name（）+“”+self.缩写（）；这不起作用：对象#没有方法“Name”……名称和缩写是ko.observables吗？如果是，可以尝试：返回self.Name（）+“”+self.缩写（）；这不起作用：对象#没有方法“Name”…self.FullName=ko.computed（函数（项）{return item.Name+“”+item.缩写；}）如果它存在于主视图模型中并返回每个项的值，那么您不会希望它是

ko.computed

。它可以只是一个普通函数。好的。。现在我得到一个文本字符串：“function（item）{return item.缩写（）+”“+item.Active（）；}”returnedI在答案中有一个错误。更新。需要传递数据，因为KO只传递处理程序的数据（单击/event）。self.FullName=KO.computed（函数（项）{return item.Name+“”+item.缩写；}），如果它存在于主视图模型上并返回每个项的值，则您不希望它是

KO.computed

。它可以只是一个普通函数。好的。。现在我得到一个文本字符串：“function（item）{return item.缩写（）+”“+item.Active（）；}”returnedI在答案中有一个错误。更新。需要传递数据，因为KO只传递处理程序的数据（单击/事件）。

// use () with item.Name and item.Abbreviation as below

this.NameAbbreviation = function (item) {
        return item.Name() + " " + item.Abbreviation();
    };