нокаут foreach 2 столбца

Question

У меня возникли трудности с форматированием моих данных в 2 столбца.

данные

self.safeFloatDenominations = [ 
     { denomination: "£50", value: 350 }, 
     { denomination: "£20", value: 780 }, 
     { denomination: "£10", value: 370 }, 
     { denomination: "£5", value: 280 }, 
     { denomination: "£2", value: 398 }, 
     { denomination: "£1", value: 491 }, 
     { denomination: "50p", value: 57.5 }, 
     { denomination: "20p", value: 62.8 }, 
     { denomination: "10p", value: 576.20 }, 
     { denomination: "5p", value: 85.05 }, 
     { denomination: "2p", value: 100.04 }, 
     { denomination: "1p", value: 35.12 }, 
    ]; 

код

<div data-bind="foreach: safeFloatDenominations"> 
<input type="text" data-bind="value: value" /> 
<label data-bind="text: denomination"></label> 
</div> 

, что я хотел бы получить:

<div > 
<input type="text" value="£50" /> 
<label>£50</label> 

<input type="text" value="50p" /> 
<label>50p</label> 
</div> 
<div > 
<input type="text" value="£20" /> 
<label>£50</label> 

<input type="text" value="20p" /> 
<label>50p</label> 
</div> 
<div > 
<input type="text" value="£10" /> 
<label>£50</label> 

<input type="text" value="10p" /> 
<label>50p</label> 
</div> 
....... 

Кто-нибудь знает, как я могу разделить Еогеасп, так что данные поступают по желанию ?

EDIT

Просто чтобы прояснить, кто-нибудь знает, как я могу разделить список, так что первая половина данных списка в колонке 1, а вторая половина списка в колонке 2?

Answer 1

Вы считали, что используете что-то вроде бутстрапа? Вы можете поместить класс col-sm-6 на внешний div, который поместит строки в 2 столбца. Этот метод является предпочтительным, поскольку это упрощает сборку адаптивного макета, просто добавляя такие классы, как col-md-4, который размещает 3 столбца бок о бок на экранах среднего размера. Аналогично, col-xs-12 создаст только 1 столбец на телефонах.

Вот пример на JSFiddle.

Edit:

Хорошо, теперь я вижу, столбцы должны быть первой записи рядом с середины записи, описанный выше метод будет поместить первую запись рядом со вторым.

Для достижения такого поведения, вероятно, проще всего использовать knockout-repeat.

Разделить данные на 2 массива, первую половину и вторую половину. (Это может быть computeds)

var half = self.safeFloatDenominations.length/2; 
self.sfd_part1 = self.safeFloatDenominations.slice(0, half); 
self.sfd_part2 = self.safeFloatDenominations.slice(half); 

Тогда в HTML

<div data-bind="repeat: { count: sfd_part1.length }"> 
    <input type="text" data-bind="value: sfd_part1[$index].value" /> 
    <label data-bind="text: sfd_part1[$index].denomination"></label> 

    <input type="text" data-bind="value: sfd_part2[$index].value" /> 
    <label data-bind="text: sfd_part2[$index].denomination"></label> 
</div> 

Вот JSFiddle.

Answer 2

Я согласен с ответом Мэтта и рассмотрю другой способ изложения элементов.

Сказав это, то, что вы хотите, выполнимо. Поставьте computed перед вашим массивом, что пары до данных, которые будут отображаться в каждом столбце:

var vm = function() { 
 
    var self = this; 
 
    
 
    self.safeFloatDenominations = [ 
 
     { denomination: "£50", value: 350 }, 
 
     { denomination: "£20", value: 780 }, 
 
     { denomination: "£10", value: 370 }, 
 
     { denomination: "£5", value: 280 }, 
 
     { denomination: "£2", value: 398 }, 
 
     { denomination: "£1", value: 491 }, 
 
     { denomination: "50p", value: 57.5 }, 
 
     { denomination: "20p", value: 62.8 }, 
 
     { denomination: "10p", value: 576.20 }, 
 
     { denomination: "5p", value: 85.05 }, 
 
     { denomination: "2p", value: 100.04 }, 
 
     { denomination: "1p", value: 35.12 }, 
 
    ]; 
 
    
 
    self.denominationPairs = ko.computed(function() { 
 
    var ret = []; 
 
    for (var x = 0; x < self.safeFloatDenominations.length; x+=2) { 
 
     var pair = {}; 
 
     pair['left'] = self.safeFloatDenominations[x]; 
 
     if (x+1 < self.safeFloatDenominations.length) 
 
     pair['right'] = self.safeFloatDenominations[x+1] 
 
     ret.push(pair); 
 
    } 
 
    return ret; 
 
    }); 
 
}; 
 

 
ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="foreach: denominationPairs "> 
 
    <div> 
 
    <input type="text" data-bind="value: left.value" /> 
 
    <label data-bind="text: left.denomination"></label> 
 

 
    <!-- ko if: right != null --> 
 
     <input type="text" data-bind="value: right.value" /> 
 
     <label data-bind="text: right.denomination"></label> 
 
    <!-- /ko --> 
 
    </div> 
 
</div>

Но на самом деле, попробовать работать его с другим макетом!