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

Posted 2023-05-09

【中文标题】将从 foreach 函数返回的数据分解为单独的 div

【英文标题】：break data returned from foreach function into seperate 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中的数据。 请建议我如何解决它。

【参考方案1】：

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

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

【讨论】：

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