Question

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

不必要 - 这是KO工作的必要条件
过多 - data-bind =需要数据才能正常工作
Code Clutter - 大量标记..

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

<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。

Answer 1

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

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

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

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

Answer 2

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

我对此事业的贡献是约会配置库 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/

来自Knockout JS的HTML标记过多

2 个答案: