淘汰赛js中的多个数据绑定答案

【问题标题】：Multiple data-bind in knockout js淘汰赛js中的多个数据绑定
【发布时间】：2013-04-17 23:12:49
【问题描述】：

我有两个文本属性数据 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纽约

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

【问题讨论】：

【解决方案1】：

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

例如（假设您的 Date 和 City 是 observables）：

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

我个人觉得计算方法是一种更清洁的方法。

【讨论】：

我需要为日期和城市应用样式。在上面的示例 DateCity 中，我无法应用样式。
CSS 类与文本绑定无关，它只控制显示的数据。你仍然可以像我上面那样应用这两个 CSS 类。
计算是最好的方法，IMO。另一种选择是使用淘汰赛 cmets：

【解决方案2】：

你可以简单地写：-

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

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

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

这种方式对我有用。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您可以添加 2 个跨度或这样称呼它

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

【讨论】：

【解决方案5】：

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

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


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

【讨论】：

@radim : 我想你忘记在这里使用 () data-bind=" text:Date(), text: City" 我想应该是 data-bind=" text:Date(), text: City()"

【解决方案6】：

ko.punches 你可以这样做

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

一个很棒的插件只是另一种选择。

【讨论】：

【解决方案7】：

尝试使用这种格式：

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

【讨论】：