如何连接文本绑定中使用的可观察量的值

How to concatenate values of observables used in a text binding?

本文关键字：观察 绑定 何连接 连接 文本      更新时间：2023-09-26

填充用户数据后，我想将他们的全名显示为列表元素。

数据绑定设置如下：

<ul id="availableOwners">
    <!-- ko foreach: OwnersList-->
    <li data-bind="text: FirstName, click: AddOwnerToUser.bind($data), value: Id" style="cursor: pointer"></li>
    <!-- /ko -->
</ul>

我想用javascript函数显示全名：

<li data-bind="text: function() { return FirstName + ' ' + LastName }, click: AddOwnerToUser.bind($data), value: Id" style="cursor: pointer"></li>

但是，它按字面方式显示函数定义的列表，如下所示：


function () { return FirstName + ' ' + LastName}
function () { return FirstName + ' ' + LastName}
function () { return FirstName + ' ' + LastName} ...

有谁知道如何在以这种方式绑定列表的情况下正确显示全名？

要将多个observables连接在一起，您需要通过使用()来评估它们。

例如：

<li data-bind="text: FirstName() + ' ' + LastName(), click:AddOwnerToUser.bind($data), value: Id" style="cursor:pointer"></li>

但是，理想情况下，您应该改用计算的可观察量：

self.FullName = ko.computed(function () {
    return self.Firstname() + ' ' + self.LastName();
}

<li data-bind="text: FullName, click:AddOwnerToUser.bind($data), value: Id" style="cursor:pointer"></li>

对于更复杂的模型，您可以考虑使用计算的可观察量，而不是过度填充视图/html 文件：

this.FullName = ko.computed(function () {
    return this.Firstname() + ' ' + this.LastName();
}
相关文章：