Question

我对Knockout很新，我对它在重新分配的DOM中显示内容的方式感到有些惊讶。

我在一行和一个类中添加了4个data属性，我发现在检查生成的HTML标记以进行调试时，事情开始变得冗长。

如果我想完成这样的事情：

<tr class="admin" data-user-id="10" data-user-email:'demo@demo.com' data-active="true">Alvaro</tr>

在生成的HTML标记中结束时间过长：

<tr data-bind="text: name, css: type, attr:{ 'data-user-id': user_id, 'data-user-email': email, 'data-active': $root.isActive()}" class="admin" data-user-id="10" data-user-email='demo@demo.com' data-active="true">Alvaro</tr>

由于在生成的标记上显示了许多隐藏数据（或逻辑），因此检查DOM会更加困难。

这种框架中这是正常的吗？（ember.js，angular.js ......）或者它只是来自knockout.js的东西？

有没有办法阻止这种＆＃34;复制＆＃34; ？

Answer 1

基于Jeff Mercado的评论，如果你创建了一个如下所示的自定义绑定：

ko.bindingHandlers.myCustomBinding = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var $data = ko.unwrap(valueAccessor());
        element.setAttribute('data-user-id', $data.user_id);
        element.setAttribute('data-user-email', $data.email);
        element.setAttribute('data-active', ko.unwrap(bindingContext.$parent.isActive));
    }
}

您可以将它应用于您的元素：

<tr data-bind="myCustomBinding: $data"></tr>

检查DOM时生成的HTML将如下所示：

<tr data-bind="myCustomBinding: $data" data-user-id="10" data-user-email="demo@demo.com" data-active="true"></tr>

不那么健谈，现在你有一个可重复使用的绑定。

此外，您不必像我在上面的示例中那样将$data传递到自定义绑定中。相反，您可以在自定义绑定bindingContext.$data函数中引用init，而不是展开valueAccessor。如果您这样做，那么您可以将任何内容传递给您的自定义绑定，包括空字符串，因为valueAccessor将不会在您的自定义绑定中使用。这会更加缩短您的HTML，因为它会从这样开始：<tr data-bind="myCustomBinding: ''"></tr>

Answer 2

如果您关注绑定后HTML中持久存在的data-bind属性，则可以使用自定义绑定提供程序删除该属性。这是我写的一篇文章：https://stackoverflow.com/a/23620576/1287183

Knockout.js太冗长了吗？

2 个答案: