Comment effectuer foreach dans knockout.js pour un multiple ligne et liste des colonnes

Question

J'ai lu sur chaque fonction js knock-out, mais je suis en train d'effectuer une où il y a 3 lignes, donc après un rangée de 3 utilisateurs sont peuplés, knock-out devrait aller à la ligne suivante et le peupler, comment puis-je y parvenir ??

Answer 1

Vous devez regrouper les utilisateurs en fonction de leurs index. L'objectif final est de créer un tableau de tableaux où les tableaux internes contiennent les données pour chaque colonne. Vous pouvez créer une propriété computed comme ceci:

var viewModel = function() { 
    var self = this; 

    self.users = [ 
    { name: "name 1"}, 
    { name: "name 2"}, 
    { name: "name 3"}, 
    { name: "name 4"}, 
    { name: "name 5"}, 
    { name: "name 6"}, 
    { name: "name 7"}, 
]; 

    // this array looks: [[user1,user2,user3], [user4,user5,user6]] 
    self.groupedUsers = ko.computed(function() { 
    var rows = []; 

    self.users.forEach(function(user, i) { 
     // whenever i = 0, 3, 6 etc, we need to initialize the inner array 
     if (i % 3 == 0) 
     rows[i/3] = []; 

     rows[Math.floor(i/3)][i % 3] = user; 
    }); 

    return rows; 
    }); 
}; 

ko.applyBindings(new viewModel()); 

Et dans votre html:

<table> 
    <tbody data-bind="foreach: groupedUsers"> 
    <tr data-bind="foreach: $data"> 
     <td data-bind="text: name"> 
     </td> 
    </tr> 
    </tbody> 
</table> 

$data est le tableau intérieur ici dans son contexte. You can read about binding context here.

Here's a fiddle for testing

---

Options CSS:

Je ne suis pas un expert, mais la clé est ici si vous avez un container pour chaque row. Si vous n'aviez pas de séparateur entre chaque rangée, vous pourriez obtenir ceci en utilisant css pur. Vous pouvez utiliser float: left sur les conteneurs utilisateur et cela prend le nombre d'utilisateurs par ligne en fonction de la taille de l'écran et de la largeur du conteneur.

La même ligne d'argument peut être faite si vous utilisez un cadre comme bootstrap ou foundation qui ont des classes de grille pour aider. Vous devez contenir tous les column s dans une classe row et la grille s'ajusterait automatiquement en fonction de la taille de l'écran et des classes personnalisées col-md et col-sm que vous définissez en fonction de vos besoins au niveau de l'appareil.