0

我正在学习 knockoutjs，并注意到我的页面包含很多看起来 .. 的标记，但不确定它看起来是什么。

  • 不必要的 - KO 工作所必需的
  • 过多 - data-bind= 需要数据才能工作
  • 代码混乱 - 大量标记..

也许我正在“在线”做事，而不是正确使用视图这段代码：

<tr data-bind="css: {'checked':Active,'unchecked':!Active,}">
            <td data-bind="text: Name, class: Active"></td>
</tr>

生成：

<tr data-bind="css: {'checked':Active,'unchecked':!Active,}" class="checked">
  <td data-bind="text: Name, class: Active">Aaron46</td>
</tr>
<tr data-bind="css: {'checked':Active,'unchecked':!Active,}" class="checked">
  <td data-bind="text: Name, class: Active">Abigail</td>
</tr>
<tr data-bind="css: {'checked':Active,'unchecked':!Active,}" class="unchecked">
  <td data-bind="text: Name, class: Active">Adrienne</td>
</tr>
<tr data-bind="css: {'checked':Active,'unchecked':!Active,}" class="checked">
  <td data-bind="text: Name, class: Active">Aimee</td>
</tr>

这看起来像“混乱代码”吗？还是我不应该担心... :)

到目前为止，我很喜欢 KnockOutJS ..

4

2 回答 2

2

我必须承认，经过多年使 Html 尽可能稀疏，将很多东西放入数据绑定中感觉不对。

但是，几周后，它的力量让我解决了这个问题。至少这一切都有意义。

话虽如此，如果您实际上没有绑定到某些数据，我不会使用 Knockout 在您的 tds 上设置 CSS。所以我会这样做：

<tr data-bind="css: {'checked':Active,'unchecked':!Active,}">
            <td class="Active" data-bind="text: Name"></td>
</tr>
于 2013-01-22T16:02:45.627 回答
1

周围有一些库可以最大限度地减少或消除对标记中绑定的需求。

我对这个原因的贡献是对配置库的约定 https://github.com/AndersMalmgren/Knockout.BindingConventions

它使用约定而不是显式绑定，您会惊讶地发现，在使用这样的库时，您很少需要显式声明绑定，您的 css 示例仍然需要使用标准绑定，或者如果您创建自己的约定。

例如，使用香草 KO：

<button data-bind="click: save, enable: canSave">Save</button>

我的库：

<button data-name="save">Save</button>

http://jsfiddle.net/3Ajnj/

于 2013-01-22T16:10:46.377 回答