Question

瓷砖可能有点令人困惑，但让我告诉你我想要的东西。

考虑以下淘汰模板：

<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解决方法，但这不是我正在寻找的修复，因为我无法监督已经使用当前渲染模板的项目的问题。

Answer 1

我之前遇到过这个问题，之前创建的空文本节点造成的问题比屏幕上的空白更大。

这是因为相关部分中的任何（模板和您案例中的<div>）都是该部分的一部分，并且会重复以及您感兴趣的实际内容。包括<span>模板中<script>之前/之后的所有空格，以及内联评论淘汰指令之前/之后的所有空格。

一个快速解决方法是确保您的模板在<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>

例如：

＆＃13;

var vm = {
  nodes: ko.observableArray()
}

vm.nodes.push({text: 'one'});
vm.nodes.push({text: 'two'});
vm.nodes.push({text: 'three'});

ko.applyBindings(vm);

＆＃13;

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

＆＃13;

渲染挖空模板＆＃39;内联＆＃39;

1 个答案: