4

我正在尝试使用grunt-contrib-html来缩小我的 html。我使用带有无容器控制流语法的敲除的唯一问题，这只是 html 注释，但它们对于敲除非常重要：

<ul>
    <li>This item always appears</li>
    <!-- ko if: someExpressionGoesHere -->
        <li>I want to make this item present/absent dynamically</li>
    <!-- /ko -->
</ul>

<!-- ko foreach: myItems -->
    <li>Item <span data-bind="text: $data"></span></li>
<!-- /ko -->

因此，当我使用带有以下选项的 minifier 时：

options: {
   removeComments: true,
   collapseWhitespace: true
}

缩小后应用程序不工作（不足为奇，它删除<!-- ko comments）。删除removeComments解决了这个问题，但我的 html 有很多评论，只有少数是淘汰赛特定的。此外，所有淘汰评论都很容易识别：它们<!-- ko在开头和<!-- /ko -->结尾都有。

寻找底层的html 缩小器选项- 没有什么比“正确处理淘汰评论”更好的了。

那么有没有办法解决我的问题：缩小 html 删除评论，但留下淘汰赛特定评论？

4

2 回答 2

9

所以......这现在是通过ignoreCustomComments选项实现的。

这是我们测试套件的一个片段：

var input = '<!-- ko if: someExpressionGoesHere --><li>test</li><!-- /ko -->';

equal(minify(input, {
  removeComments: true,
  // ignore knockout comments
  ignoreCustomComments: [
    /^\s+ko/,
    /\/ko\s+$/
  ]
}), input);
于 2014-05-16T12:56:15.397 回答
0

如果出于某种原因，您仍然想使用无容器控制流而不在代码中添加注释标记，我已经编写了一个绑定处理程序来为您完成。

像这样应用它：

<div data-bind="wrap: {foreach: arr}" data-bind-inner="text: $data"></div>

将容器的绑定作为属性包含在内，data-bind将元素本身的绑定作为data-bind-inner属性。处理程序实际上创建注释标签并将指定的绑定应用到它们，所以没有什么真正棘手的事情发生。

ko.bindingHandlers.wrap = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var outerBinding = valueAccessor(),
      vNodeOpen = document.createComment('ko'),
      vNodeClose = document.createComment('/ko');
    element.dataset.bind = element.dataset.bindInner;
    // Enclose element in comment nodes
    element.parentNode.insertBefore(vNodeClose, element);
    element.parentNode.insertBefore(element, vNodeClose);
    element.parentNode.insertBefore(vNodeOpen, element);
    ko.applyBindingsToNode(vNodeOpen, outerBinding, bindingContext);
  }
};

演示小提琴

正如所写，它适用于单个节点（当然还有它的后代节点）；您不能包装一对兄弟姐妹，但可以将其扩展为采用siblingCount选项。

于 2015-12-26T12:15:32.267 回答