敲除js中的多个数据绑定

Question

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

<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 纽约

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

Answer 1

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

例如（假设您的日期和城市是可观察的）：

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()" />

就我个人而言，我觉得计算出的方法是一种更清洁的方法。

Answer 2

您可以简单地写： -

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

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

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

这种方式对我有用。

Answer 3

要为每个部分使用单独的样式，您需要单独的HTML元素来附加这些样式。对每个部分使用span都可以。

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

Answer 4

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

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

Answer 5

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

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


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

Answer 6

使用ko.punches即可

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

只是另一个选项，包含一个很棒的插件。

Answer 7

尝试使用以下格式：

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