2

几天来我一直在尝试解决这个问题，但无法使其正常工作。在我们运行的一些电子商务网站上替换旧的 Flash 品牌 - 我们销售类似横幅时，对于 Javascript 和移动友好的解决方案，我试图赶上这个要求：

  • 通过 AJAX（完成）获取品牌列表和设置（即每张幻灯片的最大项目数）。
  • 使用引导轮播（完成）。
  • 动态轮播内容渲染，使用 Knockout

问题在于后者，因为我找不到在每张幻灯片上绘制内容的方法。在这个 SO question (with jsfiddle partner)中可以看到我想要实现的非动态渲染（基于直接 html ） 。

我在使用 KO foreach 绑定时遇到问题，以便在每张幻灯片上呈现多个项目。

关于以下代码的一些见解...

  • 品牌：品牌结构列表。一个 observableArray，包含表示品牌的不可观察结构（名称、图像 URL 等）
  • $parent.isFirst()：如果必须绘制新幻灯片，则返回给定每张幻灯片的最大项目数
  • $parent.defineItemClass：返回幻灯片的类（它只用'活动项目'标记第一个，其余的只是'项目'
  • $parent.drawTail:判断包含的 html 是否必须被绘制

模板...

<script type="text/html" id="brand-widget-template">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="carousel slide" id="brands-carousel">
            <div class="carousel-inner" data-bind="foreach: brands">
                <!-- ko if: $parent.isFirst() -->
                <div data-bind="css: $parent.defineItemClass($index)">
                    <ul class="thumbnails">
                <!-- /ko -->
                    <li class="span1">
                        <div class="caption">
                            <h5 data-bind="text: Name"></h5>
                        </div>
                        <div class="thumbnail">
                            <img src="#" alt="">
                        </div>
                    </li>
                <!-- ko if: $parent.drawTail() -->
                    </ul>
                </div>
                <!-- /ko -->
            </div>
        </div>
    </div>
</div>

我一定对渲染完成的方式有误解。在调试中，我注意到 $parent.drawTail 永远不会被调用。有任何想法吗？

这是我从项目中分离出最重要的部分的小提琴。

谢谢！路易吉

4

1 回答 1

0

我认为最好有一个计算的 observable 将主列表分解成一个嵌套列表，这样你就可以为每个循环使用嵌套。这会将视图逻辑放回视图模型中，而不是将其放在模板中。

所以对于视图模型来说是这样的：

 self.brands_in_fours = ko.computed(function () {
        var outer_array = [];

        _.each(self.brands(), function (item, index) {
            if (index % 4 == 0) {
                outer_array.push(ko.observableArray([item]));
            } else {
                outer_array[outer_array.length - 1]().push(item);
            }
        });
        return outer_array;
    });

（我使用 underscore.js 循环遍历 self.brands 数组）

模板：

<div class="carousel-inner" data-bind="foreach: brands_in_fours">
    <div class="item" data-bind="css: {'active': $index()==0}">
        <ul data-bind="foreach: $data">
            <li class="span3">
                <div class="caption">
                    <h5 data-bind="text: Name"></h5>
                </div>
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="" />
                </div>
            </li>
        </ul>
    </div>
</div>

此外，我认为您将“活动”类添加到第一个元素过于复杂 - 您只需检查索引并在其等于 0 时添加它。

我附上了一个jsfiddle

于 2013-11-05T23:35:56.757 回答