Knockout.js 太啰嗦了？

Question

我对 Knockout 很陌生，我对它在结果中显示内容的方式感到有点惊讶 DOM。

我在一行中添加了 4 个 data 属性和一个 class，我发现在检查生成的 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?

的东西

有什么办法可以防止这种情况"duplicating"？

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 传递到您的自定义绑定中。相反，您可以在自定义绑定 init 函数中引用 bindingContext.$data，而不是展开 valueAccessor。如果您这样做，那么您可以将任何内容传递给您的自定义绑定，包括一个空字符串，因为 valueAccessor 不会在您的自定义绑定中使用。这会进一步缩短你的 HTML 因为它会开始看起来像这样： <tr data-bind="myCustomBinding: ''"></tr>

Answer 2

如果您担心 data-bind 属性在绑定后仍然存在于 HTML 中，您可以使用自定义绑定提供程序删除该属性。这是我为此写的一篇文章：

Knockout.js 太啰嗦了？

Knockout.js too verbose?

javascript

knockout.js

knockout-3.0