Question

以下是我的cshtml文件中的代码段，其中我使用knockout循环来显示内容：

<div data-bind="visible: results().length > 0, foreach: results">    
    <div class="row">
    <!-- ko if: ImageTileSize == "2" -->    
        <div class="col-md-6">
    <!-- /ko -->
    <!-- ko if: ImageTileSize == "1" -->    
        <div class="col-md-3">
    <!-- /ko -->
            <a data-bind="attr: { href: Link }" class="powering-article">
                <div class="powering-listimg">
                <img data-bind="attr: { src: ImageUrl }" alt="" class="img-responsive">
                </div>
                <p><span data-bind="    text: PublishedDate.format('DD MMM YYYY')"></span> | <strong><span data-bind="    text: Category"></span></strong></p>
                <h2 data-bind="text: Title"></h2>
            </a>
        </div>
    </div>
</div>

注意：ImageTIleSize将始终为1或2。

我喜欢做的是在for循环中应用counter，所以如果ImageTileSize等于4，那么在循环内创建另一个div div标签，其内容与上面相同。

我不完全确定如何将敲除值传递给剃刀：

@int count = 0;
<div data-bind...
    @if(..

    }
    ...
    @count = count + ImageTileSize; //doesn't work, can't grab the ImageTileSize value
</div>

更新

这是bootstrap当前每12列后处理行的方式：

＆＃34;第1条和第34条;应该从＆＃34;第3条和第34条开始，但它会在＆＃34;第2条和第34条下找到足够的空间。虽然，如果我要添加像＆＃34;第4条＆＃34;这样的大图像，那么它的位置是正确的。

Answer 1

这里需要注意几点：

Razor代码运行服务器端。 ImageTileSize是results obserableArray中每个对象的属性。您不能将它与c＃count变量一起使用。
您的Containerless control flow syntax无效。它们的行为类似于HTML元素。在您的情况下，div代码没有结束标记。

我假设你想为引导网格系统的每个“12列”获得一个新的row。你可以这样做：

<div class="row" data-bind="visible: results().length > 0, foreach: results">
    <div data-bind="attr: { class: ImageTileSize == '1' ? 'col-md-3' : 'col-md-6' }">
        <a data-bind="attr: { href: Link }" class="powering-article">
            <div class="powering-listimg">
            <img data-bind="attr: { src: ImageUrl }" alt="" class="img-responsive">
            </div>
            <p><span data-bind="    text: PublishedDate.format('DD MMM YYYY')"></span> | <strong><span data-bind="    text: Category"></span></strong></p>
            <h2 data-bind="text: Title"></h2>
        </a>
   </div>
</div>

Here's a fiddle进行测试。我已将类从col-md-*更改为col-xs-*，因为结果窗口很小，所有col-md-都在新行中呈现。

请注意，在每个“12列”之后，这不会生成新的<div class="row">。但是bootstrap会自动处理它。只要它不适合下一个col-md-3，默认情况下它将移动到下一行。

更新

如果您仍想为每个“12列”创建新的row，则可以创建名为groupedResults的{{3}}属性。这将是一个数组数组。每个内部数组将包含每个results的{{1}}。这里的想法是遍历row并将它们分组以适应引导程序results。

row

然后在你的HTML中：

// this array looks: [[result1,result2,result3], [result4,result5]] based on tile width of each result
self.groupedResults = ko.computed(function() {
    var rows = [];
    var count = 0; // image tile count for current row

    self.results().forEach(function(item, i) {
      // initialize new inner array when count = 0 
      // or when the total tile count > 4
      if (count == 0 || (count + parseInt(item.ImageTileSize)) > 4) {
        rows[rows.length] = [item];
        count = parseInt(item.ImageTileSize);
      } else {
        rows[rows.length - 1].push(item);
        count += parseInt(item.ImageTileSize);
      }
    });

    return rows;
});

<div data-bind="visible: groupedResults().length > 0, foreach: groupedResults"> <div class="row" data-bind="foreach: $data"> <div style="text-align: center" data-bind="attr: { class: ImageTileSize == '1' ? 'col-md-3' : 'col-md-6' }"> <a data-bind="attr: { href: Link }" class="powering-article"> <div class="powering-listimg"> <img data-bind="attr: { src: ImageUrl }" alt="" class="img-responsive"> </div> <p><span data-bind=" text: PublishedDate.format('DD MMM YYYY')"></span> | <strong><span data-bind=" text: Category"></span></strong></p> <h2 data-bind="text: Title"></h2> </a> </div> </div> </div>这是上下文中的内部数组。 computed

You can read about binding context here.

如何创建一个bootstrap＆＃34; row＆＃34;在剃刀中动态使用敲除foreach绑定

1 个答案: