淘汰赛 - 动态生成引导样式

Question

我正在使用 Knockout 的 forech 数据绑定来呈现模板。问题是，对于使用 foreach 绑定生成的每三个项目，我想创建一个带有类行的新 div。本质上，我只想在一行中显示三个项目。对于第四项，应创建新行。但是 foreach 数据绑定已应用于行 div 内的 div。我该如何做到这一点？以下是代码。

HTML

<div class="row">
  <!-- Item #1 -->
    <div class="col-md-4 col-sm-6 col-xs-12" data-bind="foreach:items">
      <div  data-bind="attr: {id: ID}" class="item">
        <!-- Use the below link to put HOT icon -->
        <div class="item-icon"><span>HOT</span></div>
          <!-- Item image -->
          <div class="item-image">
            <a href="single-item.html"><img data-bind="attr: {src: picture}" src="img/items/2.png" alt="" class="img-responsive"/></a>
          </div>
          <!-- Item details -->
          <div class="item-details">
            <!-- Name -->
            <h5><a data-bind="text: itemname" href="single-item.html">HTC One V</a></h5>
            <div class="clearfix"></div>
            <!-- Para. Note more than 2 lines. -->
            <!--p>Something about the product goes here. Not More than 2 lines.</p-->
            <hr />
            <!-- Price -->
            <div data-bind="text: price"  class="item-price pull-left">$360</div>
            <!-- qty -->
            <div data-bind="text: quantity" class="item-price text-center">$360</div>
            <!-- Add to cart -->
            <div class="pull-right"><a href="#" class="btn btn-danger btn-sm">Add to Cart</a></div>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>

Javascript：

function itemsKo()
  {
    var self=this;
    self.query = ko.observable();
    self.hide = ko.observable(false);
    self.items = ko.observableArray();
    self.subcat=function()
    {

$.ajax({
                url: "/items,
                type: "get",
                success: function(data){



                    ko.utils.arrayForEach(data, function(item) {
                      item.price = "Rs" + item.price;
                     self.items.push(item);
                    });
                    //console.log(JSON.stringify(window.vm.items()));
                 },
              error:function(jqXHR, textStatus, errorThrown) {
                   alert("failure");
                 }   
           });


    }
  }

Answer 1

最简单的解决方案是找到一种将数组映射到行/列结构的方法。所以，一个行数组，其中每一行是该行中的一个项目数组。

这是一个较旧的答案，它显示了在 VM 中创建计算来将数组表示为一组行：Knockout.js - Dynamic columns but limit to a maximum of 5 for each row

另一种选择是创建一个自定义绑定，为您处理此计算的管道。优点是您不需要使用额外的代码使您的视图模型膨胀，并且它是可重用的。可能的实现可能如下所示：

ko.bindingHandlers.rows = {
    init: function (element, valueAccessor, allBindings, data, context) {
        var rows = ko.computed({
            read: function() {
                var index, length, row,
                    options = ko.unwrap(valueAccessor()),
                    items = ko.unwrap(options.items),
                    columns = ko.unwrap(options.columns)
                    result = [];

                for (index = 0, length = items.length; index < length; index++) {
                    if (index % columns === 0) {
                        //push the previous row, except the first time
                        if (row) {
                             result.push(row);   
                        }

                        //create an empty new row
                        row = [];
                    }

                    //add this item to the row
                    row.push(items[index]);
                }

                //push the final row  
                if (row) {
                    result.push(row);
                }

                //we know have an array of rows
                return result;
            },
            disposeWhenNodeIsRemoved: element
        });

        //apply the real foreach binding with our rows computed
        ko.applyBindingAccessorsToNode(element, { foreach: function() { return rows; } }, context);

        //tell KO that we will handle binding the children
        return { controlsDescendantBindings: true };
    }
};

这是一个快速的操作：http://jsfiddle.net/rniemeyer/nh6d7/

它是一个计算的，所以列和项目的数量是可观察的，并且会导致它在更改时重新呈现。如果您经常更新原始项目，这可能是一个小问题。