如何创建一个在循环元素之间不包含空格的 foreach？答案

【问题标题】：How to create a foreach that doesn include whites space between the looped elements?如何创建一个在循环元素之间不包含空格的 foreach？
【发布时间】：2015-08-09 14:22:56
【问题描述】：

我有一个foreach，它输出 div 元素，如下所示：

<!-- ko foreach: names -->
  <div class="grid__item">
      <p data-bind="text: $index"></p>
  </div>
<!-- /ko -->

function AppViewModel() {
    var self = this;

    self.names = ko.observableArray([
        { name: 'Woop' },
        { name: 'Dee' },
        { name: 'Doo' }
    ]);

}

app = new AppViewModel(); 
ko.applyBindings(app);

这导致 DOM 在：

<div class="grid__item">
  <p>0</p>
</div>
<div class="grid__item">
  <p>1</p>
</div>
<div class="grid__item">
  <p>2</p>
</div>

但是，我需要在div 元素之间没有空格，即我希望它呈现如下：

<div class="grid__item">
  <p>0</p>
</div><div class="grid__item">
  <p>1</p>
</div><div class="grid__item">
  <p>2</p>
</div>

【问题讨论】：

诚实的问题，只是为了检查一下：这绝不是 XY 问题的一个实例，X 实际上是 "getting gaps between divs"?
是的，同样的问题只需要敲除语法

标签： javascript html dom knockout.js

【解决方案1】：

应该很简单，只需删除评论块中的空格即可：

function AppViewModel() {
    var self = this;

    self.names = ko.observableArray([
        { name: 'Woop' },
        { name: 'Dee' },
        { name: 'Doo' }
    ]);
}

app = new AppViewModel(); 
ko.applyBindings(app);

div { border: 1px solid red; display: inline-block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<!-- ko foreach: names --><div class="grid__item">
  <p data-bind="text: $index"></p>
</div><!-- /ko -->

但是，这感觉很尴尬。所以我将在这里重复我的评论：诚实的问题，只是为了检查一下，这绝不是 XY 问题的一个实例，其中 X 实际上是 "getting gaps between divs"？

【讨论】：