1

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

我data连续添加了 4 个属性和一个类，我发现在检查生成的 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的特殊东西？

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

4

2 回答 2

3

基于 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>

于 2015-07-01T18:14:08.820 回答
2

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

于 2015-07-01T22:52:40.077 回答