Question

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

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

我的问题是我想在每个单独的div中显示来自此局部视图的数据。意味着如果收到10个人的数据，那么应该用class 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中的数据。请告诉我如何解决它。

Answer 1

Knockout＆＃39; s <div data-bind="foreach: profiles"> <div class="listItem"> ... </div> </div>仅重复列表中每个项目所包含的标签。因此，如果您希望每个包含在具有特定类的div中，则只需要包含在其中。例如：

<div class="radial-progress" data-progress="0">
    <div class="circle">
    <div class="img"></div>
        <div class="mask full">
            <div class="fill"></div>
        </div>
        <div class="mask half">
            <div class="fill"></div>
            <div class="fill fix"></div>
        </div>
        <div class="shadow"></div>
    </div>
    <div class="inset">
        <div class="percentage">
            <div class="numbers"><span>-</span><span>0%</span><span>1%</span> <!--- lots of spans --->
        </div>
    </div>
</div>

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

1 个答案: