ForEach List淘汰赛可以在不同的div中显示吗?

时间:2015-12-07 16:38:59

标签: javascript jquery css knockout.js

我的列表绑定到了parentDiv



var gulp = require('gulp');
var paths = require('../paths');
var browserSync = require('browser-sync');

// outputs changes to files to the console
function reportChange(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
}

gulp.task('watch', ['watch-www'], function() {
  gulp.watch(paths.api, [browserSync.reload]).on('change', reportChange);
  gulp.watch(paths.www, [browserSync.reload]).on('change', reportChange);
});



对于每个元素,它生成一个div,包含两个mo div,见下文:



var ldap = require('ldapjs');

var client = ldap.createClient({
  url: 'ldap://xx.xxx.xxx.xxxx/dc=xxxxx,dc=org'
});

var opts = {
  filter: '(objectclass=user)',
  scope: 'sub',
  attributes: ['objectGUID']
};

client.bind('xx@xxxx.org', 'xxxx', function (err) {
  console.log("Logging data...");
  client.search('dc=xxxx,dc=org', function (err, search) {
    search.on('searchEntry', function (entry) {
      var user = entry.object;
      console.log(user.objectGUID);
    });
  });
});




但是,foreach 3元素,我想创建一个新的divParent,我希望它看起来像这样:



<div class="parentDivLegende" data-bind="template: {name: 'legende', foreach : ListeLegende}"></div>
&#13;
&#13;
&#13;

意思是,从第3,第7,第10等元素开始,我希望它能打开一个新的父div。

提前致谢!

1 个答案:

答案 0 :(得分:1)

使用computed s。

在代码中执行此操作

function obj(lib, col) {
  return {
    Libelle: lib,
    Couleur: col
  };
}

data = [
  obj('one', 'blue'),
  obj('two', 'green'),
  obj('three', 'red'),
  obj('four', 'gray'),
  obj('five', 'lightblue'),
  obj('six', 'lightgreen'),
  obj('seven', 'lightgray')
];

vm = (function() {
  var self = {};
  self.originalArray = ko.observable(data);
  self.groupedArray = ko.computed(function() {
    var result = [],
      originalData = self.originalArray();
    for (var index = 0; index < originalData.length; index += 3) {
      result.push(originalData.slice(index, index + 3));
    }
    return result;
  });
  return self;
}());

ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: groupedArray">
  <h1>Group begins</h1>
  <div class="parentDivLegende" data-bind="foreach:$data">
    <div class="PaddingLegende">
      <div class="CircleLegendeColor imgLegende" data-bind="style: { backgroundColor : Couleur}">
        Some color
      </div>
      <div data-bind="text: Libelle" class="TextLegende"></div>
    </div>
  </div>
</div>