渲染淘汰赛模板'内联'答案

【问题标题】：Render knockout templates 'inline'渲染淘汰赛模板'内联'
【发布时间】：2016-10-08 21:10:30
【问题描述】：

图块可能有点混乱，但让我告诉你我想要什么。

考虑以下淘汰模板：

<script type="text/html" id="my-template">
    <span data-bind="text:text"></span>
</script>

<div data-bind="foreach: nodes">
    <!-- ko template: {name: 'my-template'}--><!-- /ko-->
</div>

这将导致类似：

<div>
    <span>Text </span>
    <span class="bold">bold</span>
    <span>.</span>
</div>

为了避免 HTML 在新行上的跨度，我想在同一行上对跨度进行排序，如下所示：

<div>
    <span>Text </span><span class="bold">bold</span><span>.</span>
</div>

我知道 font-size:0 解决方法，但这不是我正在寻找的解决方法，因为我无法监督已经使用当前渲染模板的项目的问题。

【问题讨论】：

标签： javascript html templates knockout.js whitespace

【解决方案1】：

我之前遇到过这个问题，在此之前创建的空文本节点会导致更大的问题，而不仅仅是屏幕上的空白。

这是由于相关部分（模板和<div> 在您的情况下）中的 任何内容 是该部分的一部分，并且将与您的实际内容一起重复重新感兴趣。这包括<span> 模板中<span> 之前/之后的所有空格，以及内联注释敲除指令之前/之后的所有空格。

一个快速解决方法是确保您的模板在 <span> 之外没有任何多余的空格：

<script type="text/html" id="my-template"><span data-bind="text:text"></span></script>

在您的情况下，您还需要从重复的 <div> 内容中删除空格：

<div data-bind="foreach: nodes"><!-- ko template: {name: 'my-template'}--><!-- /ko--></div>

例如：

var vm = {
  nodes: ko.observableArray()
}

vm.nodes.push({ text: 'one'   });
vm.nodes.push({ text: 'two'   });
vm.nodes.push({ text: 'three' });

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h2>Without whitespace</h2>
<script type="text/html" id="my-template"><span data-bind="text:text"></span></script>
<div data-bind="foreach: nodes"><!-- ko template: {name: 'my-template'}--><!-- /ko--></div>
<h2>With whitespace</h2>
<script type="text/html" id="my-template-ws">
  <span data-bind="text:text"></span>
</script>
<div data-bind="foreach: nodes">
  <!-- ko template: {name: 'my-template-ws'}--><!-- /ko-->
</div>

【讨论】：