渲染淘汰模板“内联”

Question

The tile may be a bit confusing but let me show you what I want.

Consider the following knockout templates:

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

This will result in something like:

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

To avoid the space the HTML is given to spans on e new line, I want to rander the spans on the same line, like this:

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

I am aware of the font-size:0 workaround, but that is not the fix I'm looking for because I can not oversee the issues for projects which are already using the current rendering templates.

Answer 1

I've hit this issue before where the resulting empty text nodes created were causing bigger issues than just whitespace on screen.

It's caused by the fact that anything within the relevant sections (both the template and the <div> in your case) is part of that section, and will be repeated alongside the actual content you're interested in. That includes all the whitespace before/after the <span> in your <script> template, and that before/after the inline comment knockout directives.

One quick fix is to ensure your template doesn't have any extraneous whitespace in it outside of your <span> :

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

In your case you also need to remove the whitespace from inside your repeating <div> contents too:

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

For example:

 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>