Knockout.js 过于冗长？答案

【问题标题】：Knockout.js too verbose?Knockout.js 过于冗长？
【发布时间】：2015-07-02 06:52:40
【问题描述】：

我对 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 的特殊东西？

有什么办法可以防止这种“重复”吗？

【问题讨论】：

您始终可以选择创建自定义绑定来隐藏一些配置。
它在 SPA 中很常见，即角度等。渲染后它往往会显示绑定+渲染的内容，这使得有点冗长。

标签： javascript knockout.js knockout-3.0

【解决方案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>

【讨论】：

感谢您的解释，您能否提供一个未传递$data 变量的示例？
在myCustomBinding 中，而不是解开valueAccessor()，只需在$data 上使用$data 属性@ 例如bindingContext.$data.user_id.

【解决方案2】：

如果您担心绑定后 HTML 中的 data-bind 属性仍然存在，您可以使用自定义绑定提供程序删除该属性。这是我写的一个：https://stackoverflow.com/a/23620576/1287183

【讨论】：

有趣的解决方案！在渲染和删除 data-bind 属性之间是否有任何延迟？或者它在渲染之前执行它。