Knockout.js：有条件地绑定 div 的 title 属性答案

【问题标题】：Knockout.js: conditionally bind title attribute of divKnockout.js：有条件地绑定 div 的 title 属性
【发布时间】：2013-06-14 18:56:32
【问题描述】：

我的页面上有一个 viewModel，其中包含用于概述某些设备当前状态的数据。到目前为止，一切都很好，除了一个问题：我需要根据 viewModel 中的另一个值设置 div 元素的 title 属性。

我知道你基本上可以这样设置title属性（在div标签的data-bind属性内）：

attr: { title: 'Some title' }

使用上面的语句，“某些标题”在悬停 div 时被设置为工具提示。我也可以这样设置：

attr: { title: ConnectState.Value() }

它输出我当前 viewModel 数据的正确值（整数值），因此 viewModel 被正确填充。

现在我需要把它改成这样：

attr: {
  title: {
    'Text 1': ConnectState.Value() == 0,
    'Text 2': ConnectState.Value() == 1,
    'Text 3': ConnectState.Value() == 2,
    'Text 4': ConnectState.Value() == 3
  }
}

上面的例子只会给出“[object Object]”作为标题（分别作为工具提示）。我该如何解决？提前非常感谢！

【问题讨论】：

你为什么不写attr: { title: 'Text ' + (ConnectState.Value() + 1) }或者你的实际文本比你的例子更复杂？
不幸的是，它是。 ConnectState 的值是一个枚举，可以翻译成“已连接”、“已断开”、“正在连接”等。

标签： html data-binding knockout.js viewmodel

【解决方案1】：

在您的视图模型中定义一个 ko.computed。

self.ConnectTitle = ko.computed(function() {
   return 'Text ' + (self.ConnectState.Value() + 1).toString();
});

然后：-

attr: { title: ConnectTitle }

作为您的绑定。如果您的文本只是一个简单的示例，您可以将计算函数的内容替换为适合您需要的内容。

【讨论】：

感谢您的建议。我需要设置的标题属性存在于数据绑定表行中：所以我必须将此 ConnectTitle 函数应用于我的 viewModels "Rows" 集合中的每个项目，这是动态的，取决于页面。我不知道如何实现这一目标。
你的每一行都由一个对象表示，对吗？发布您的 Javascript 视图模型，我们来看看。