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

Question

我有一个 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>

Answer 1

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

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