将从 foreach 函数返回的数据分解为单独的 div答案

【问题标题】：break data returned from foreach function into seperate div将从 foreach 函数返回的数据分解为单独的 div
【发布时间】：2016-05-09 23:50:37
【问题描述】：

这是我在 div 中显示部分视图的剃刀视图页面的特定部分。

  <section class="middle-section peoplePageList defaultPage listOfPeople clearfix">
    <div class="peopleList">
      <div class="listItem">
         @{ Html.RenderPartial("_ProfileListPartial", Model); }
       </div>
    </div>
  </section>

我的问题是我想在每个单独的 div 中显示来自这个局部视图的数据。表示如果收到 10 个人的数据，则应使用类 listItem 创建 10 个 div。 我不擅长设计，但问题是，我必须以任何方式进行。

_ProfileListPartial 剃须刀页面是这样的：

@model App.Models.PeopleModel

 <div class="peopleList" data-bind="visible: profiles().length > 0, foreach: profiles">
  <div class="media-body">
   <a class="btn pull-right" data-bind="visible: !isFollowed && !isOwnProfile, attr: { href: followAction }">Follow</a>
   <a class="btn btn-danger pull-right" data-bind="visible: isFollowed && !isOwnProfile, attr: { href: unfollowAction }">Unfollow</a>
   <em data-bind="text: name"></em> 
   </div>
  </div>

在这里，您可以在第一行 foreach:profiles 中看到，它从剔除函数中返回多个配置文件，包括名称、图像、按钮、ID 和其他内容。

我的问题是当它在视图页面上呈现时，所有这些都组合成单个 div 而不是多个 div。可能是，可以通过javascript破坏单独的div中的数据。请建议我如何解决它。

【问题讨论】：

标签： jquery html asp.net-mvc razor knockout.js

【解决方案1】：

Knockout 的foreach 只是重复它包含的列表中每个项目的标签。因此，如果您希望每个都包含在具有特定类的 div 中，则只需将其包含在其中。例如：

<div data-bind="foreach: profiles">
    <div class="listItem">
        ...
    </div>
</div>

【讨论】：

我昨天自己解决了这个问题，顺便说一句，@Chris Pratt 的答案