Question

在我目前的数据过滤项目中，我提供了一个以isotope.min.js为参考的插件。在HTML页面中有4个li，它们充当了像这样的过滤器

<ul class="filter list-inline">
    <li><a class="active" href="#" data-filter="*">Show All</a></li>
    <li><a href="#" data-filter=".photography">Photography</a></li>
    <li><a href="#" data-filter=".illustration">illustration</a></li>
    <li><a href="#" data-filter=".branding">branding</a></li>
    <li><a href="#" data-filter=".web-design">web design</a></li>
</ul>

和10个像这样的div

<div class="project-post illustration web-design">
  <div class="item-img-wrap ">
    <img src="img/img-1.jpg" class="img-responsive" alt="workimg">
    <div class="item-img-overlay">
      <a href="img/img-1.jpg" class="show-image">
        <span></span>
      </a>
    </div>
  </div>
  <div class="work-desc">
    <h3><a href="portfolio-single.html">Logo Design</a></h3>
    <span>illustrate</span>
  </div>
  <!--work desc-->
</div>

当我们点击任何一个li时，会根据data-filter值和div类值进行过滤。

假设一个li data-filter是ABC然后当我们点击它时，它下面会显示所有具有ABC类的div，其余部分将被隐藏。我不确定它是如何工作的，但确实有效。

现在我想要实现的是让li（过滤器）和div使用knockout动态绑定。我能够绑定lis＆＃39;和divs但是当我点击过滤器时没有发生任何事情。

当我搜索同位素和淘汰赛时，我发现了一些由于冲突引起的问题（或者不是，但这是我所理解的）。所以，我必须做一些特别的事情来使其发挥作用吗？

这是我用来创建div的代码

＆＃13;

this is the knockout code i used to generate the divs `
<li class="mix color-1 TileItem" data-toggle="modal" data-target="#myModal" data-bind="visible: IsVisible, attr: { id: 'Report_' + ProductID + '_' + LinkID }">
  <div class="tileItem-Tab1 f1_card cbp-item-wrapper">
    <a class="tileImgPrnt cbp-caption cbp-lightbox" data-title="The Gang Blue<br>by Cosmin Capitanu">
      <div class="FltrTile_Img cbp-caption-defaultWrap" data-bind="style: { backgroundImage: 'url(' + LinkImage + ')' }"></div>
    </a>
    <div class="tileImg_Text" data-bind="text: LinkDefaultName"></div>
  </div>
</li>`

＆＃13;

这是我用来创建过滤器的代码

＆＃13;

Hi, this is the knockout code i used to generate the filter li `
<li class="placeholder">
  <input type="button" class="FltrBtn FltrBtn_active" data-bind="click: function () { filter(FilterLinkID, ProductID, this) }, value: FilterName, attr: { id: 'Filter_' + ProductID + '_' + FilterID }, css: { 'FltrBtn_active': $index() == 0 } " />
</li>`

＆＃13;

使用Isotope js和knockout进行过滤

0 个答案: