knockout.js - 淘汰赛js中的多个数据绑定

Question

我有两个文本属性数据 Date 和 City 是可观察的。我需要在单个 div 中连接两个文本属性数据。并为两个文本应用单独的样式。当前场景使用 knockoutjs 数据绑定属性：

<div class="date" data-bind="text:Date" />
<div class="city" data-bind="text:City" />

预期的：

<div class="date city" data-bind=" text:Date text:City" />

输出 : 2013-05-24纽约

请指导我如何做到这一点。

score 34 · Accepted Answer

您不能在一个元素上使用两个相同的绑定。相反，您应该创建一个计算格式，它使用您要显示的两个值来格式化文本。

例如（假设您的 Date 和 City 是可观察的）：

viewModel.DateCity = ko.computed(function() {
  return viewModel.Date() + " - " + viewModel.City();
});

然后在您的数据绑定中，您只需绑定到计算的。

<div class="date city" data-bind="text:DateCity" />

另一种选择是直接组合绑定中的值。

<div class="date city" data-bind="text: Date() + ' - ' + City()" />

我个人认为计算方法是一种更清洁的方法。

score 10 · Accepted Answer

你可以简单地写： -

data-bind = "text: Date() + City()"

如果你想添加任何字符串ex:- 2013-05-24 : New York，你可以编码为：

data-bind = "text: Date() + ':' + City()"

这种方式对我有用。

score 5 · Accepted Answer

要为每个部分使用单独的样式，您需要单独的 HTML 元素来附加这些样式。span对每个部分使用 a会起作用。

<div>
    <span class="date" data-bind="text:Date"></span>
    <span class="city" data-bind="text:City" ></span>
</div>

score 3 · Accepted Answer

您可以添加 2 个跨度或像这样调用它

<div class="date" data-bind="text:Date() +' '+ city()" />

score 1 · Accepted Answer

使用ko.punches你可以做到

<div class='date city'>{{ Date() }} {{ City }}</div>

具有出色插件的另一种选择。

score 1 · Accepted Answer

使用“，”或“+”号进行多个数据绑定。

<div class="date city" data-bind=" text:Date(), text: City" />


<div class="date city" data-bind=" text:Date() + City" />

score 0 · Accepted Answer

0

尝试使用这种格式：

data-bind="text: city() + ', ' + state() + ' ' + zipcode()"

于 2014-10-19T17:36:21.100 回答

7 回答 7