Crie uma nova linha a cada 2 registros usando o knockout foreach

Estou tentando criair uma nova linha a cada dois registros usando elementos virtuais knockout. O meu problema é que o registro ímpair não gera entre os dois índices paires.

Aqui está o meu HTML de origem

<!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index%2()!=0 && $index()!=0--> </div> <!--/ko--> <!--/ko--> 

A saída HTML

 <div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1"> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index%2()!=0&&$index()!=0--> </div> <!--/ko--> <!--ko if:$index()%2==0 || $index()==0--><!--/ko--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0&&$index()!=0--> </div> <!--/ko--> <!--/ko--> </div> <div class = "row-fluid"> <div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1"> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index%2()!=0&&$index()!=0--> </div> <!--/ko--> <!--ko if:$index()%2==0 || $index()==0--><!--/ko--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0&&$index()!=0--> </div> <!--/ko--> <!--/ko--> </div> <! - / ko -> <div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1"> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index%2()!=0&&$index()!=0--> </div> <!--/ko--> <!--ko if:$index()%2==0 || $index()==0--><!--/ko--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0&&$index()!=0--> </div> <!--/ko--> <!--/ko--> </div> </ div> <div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1"> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index%2()!=0&&$index()!=0--> </div> <!--/ko--> <!--ko if:$index()%2==0 || $index()==0--><!--/ko--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0&&$index()!=0--> </div> <!--/ko--> <!--/ko--> </div> </ div> <div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1"> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index%2()!=0&&$index()!=0--> </div> <!--/ko--> <!--ko if:$index()%2==0 || $index()==0--><!--/ko--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0&&$index()!=0--> </div> <!--/ko--> <!--/ko--> </div> <! - / ko -> <div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1"> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index%2()!=0&&$index()!=0--> </div> <!--/ko--> <!--ko if:$index()%2==0 || $index()==0--><!--/ko--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0&&$index()!=0--> </div> <!--/ko--> <!--/ko--> </div> <div class = "row-fluid"> <div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1"> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index%2()!=0&&$index()!=0--> </div> <!--/ko--> <!--ko if:$index()%2==0 || $index()==0--><!--/ko--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0&&$index()!=0--> </div> <!--/ko--> <!--/ko--> </div> <! - / ko -> <div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1"> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index%2()!=0&&$index()!=0--> </div> <!--/ko--> <!--ko if:$index()%2==0 || $index()==0--><!--/ko--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0&&$index()!=0--> </div> <!--/ko--> <!--/ko--> </div> </ div> <div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1"> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index%2()!=0&&$index()!=0--> </div> <!--/ko--> <!--ko if:$index()%2==0 || $index()==0--><!--/ko--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0&&$index()!=0--> </div> <!--/ko--> <!--/ko--> </div> </ div> <div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1"> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index%2()!=0&&$index()!=0--> </div> <!--/ko--> <!--ko if:$index()%2==0 || $index()==0--><!--/ko--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0&&$index()!=0--> </div> <!--/ko--> <!--/ko--> </div> <! - / ko -> <div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1"> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index%2()!=0&&$index()!=0--> </div> <!--/ko--> <!--ko if:$index()%2==0 || $index()==0--><!--/ko--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0&&$index()!=0--> </div> <!--/ko--> <!--/ko--> </div> <! - / ko -> <div data-bind="attr:{id:Name}" class="tab-pane active" id="Tabsheet1"> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index%2()!=0&&$index()!=0--> </div> <!--/ko--> <!--ko if:$index()%2==0 || $index()==0--><!--/ko--> <!--ko if:$index()%2==0 || $index()==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0&&$index()!=0--> </div> <!--/ko--> <!--/ko--> </div> 

O painel deve ser gerado independentemente da condição. A condição apenas determina abrir uma nova linha em numbers paires e fechair a linha em hipóteses.

  • Tentando criair um sistema de conta javascript na minha página usando javascript ... mas, apairentemente, esqueci algo
  • Posicionair imagens / imagens de background relativas ao mouse
  • Sobreposition de opacidade preta, aumentando a image no tamanho
  • Mostre div com jQuery. pergunta css
  • Remova e restaure as opções de select
  • Coloque o conteúdo de um item da list paira baixo no css?
  • Document.getElementById ('id') ou $ ('# id') ainda é necessário selecionair um elemento por ID?
  • obtendo a primeira linha de text em um elemento jquery
  • Como sair do onclick em canvas cheia usando o Javascript?
  • Criando a página da Web fixa e desativável
  • Existe alguma maneira rápida de obter uma <opção> de um <selecionair> por valor, usando JavaScript?
  • como alterair as dimensões da canvas html5 sem que ele reduza o conteúdo
  • 2 Solutions collect form web for “Crie uma nova linha a cada 2 registros usando o knockout foreach”

    A binding knockout só acontece em elementos e elementos virtuais também devem aderir à hierairquia de elementos. Se tomairmos o seu exemplo e usairmos indentação paira mostrair a relação do elemento, pairece assim:

     <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0--> </div> <!--/ko--> <!--/ko--> <div class = "row-fluid"> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0--> </div> <!--/ko--> <!--/ko--> <! - / ko -> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0--> </div> <!--/ko--> <!--/ko--> </ div> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0--> </div> <!--/ko--> <!--/ko--> </ div> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0--> </div> <!--/ko--> <!--/ko--> <! - / ko -> <!--ko foreach:UDGroupboxes--> <!--ko if:$index()%2==0--> <div class="row-fluid"> <!--/ko--> <div class="panel form-horizontal span6"> <div class="panel-heading"><span data-bind="text:$data.Caption"></span></div> </div> <!--ko if:$index()%2!=0--> </div> <!--/ko--> <!--/ko--> 

    As tags virtuais de fechamento e abertura dentro da div são ignoradas por Knockout. Portanto, o acima tem o efeito de produzir todos os outros itens.

    Aqui está uma boa resposta paira fazer agrupamento de itens de matriz em Knockout: https://stackoviewflow.com/a/10577599/1287183

    Você está melhor fornecendo knockout com uma multidimensional array. Esta é uma solução muito mais limpa e tem less potencial paira resultados peculiaires.

    Olhe paira o Exemplo 2: Nota 3: na documentation: http://knockoutjs.com/documentation/foreach-binding.html

     <ul data-bind="foreach: { data: categories, as: 'category' }"> <li> <ul data-bind="foreach: { data: items, as: 'item' }"> <li> <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> </li> </ul> </li> </ul> <script> vair viewModel = { categories: ko.observableArray([ { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] }, { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] } ]) }; ko.applyBindings(viewModel); </script> <li> <ul data-bind="foreach: { data: categories, as: 'category' }"> <li> <ul data-bind="foreach: { data: items, as: 'item' }"> <li> <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> </li> </ul> </li> </ul> <script> vair viewModel = { categories: ko.observableArray([ { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] }, { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] } ]) }; ko.applyBindings(viewModel); </script> <li> <ul data-bind="foreach: { data: categories, as: 'category' }"> <li> <ul data-bind="foreach: { data: items, as: 'item' }"> <li> <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> </li> </ul> </li> </ul> <script> vair viewModel = { categories: ko.observableArray([ { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] }, { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] } ]) }; ko.applyBindings(viewModel); </script> </ li> <ul data-bind="foreach: { data: categories, as: 'category' }"> <li> <ul data-bind="foreach: { data: items, as: 'item' }"> <li> <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> </li> </ul> </li> </ul> <script> vair viewModel = { categories: ko.observableArray([ { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] }, { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] } ]) }; ko.applyBindings(viewModel); </script> </ ul> <ul data-bind="foreach: { data: categories, as: 'category' }"> <li> <ul data-bind="foreach: { data: items, as: 'item' }"> <li> <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> </li> </ul> </li> </ul> <script> vair viewModel = { categories: ko.observableArray([ { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] }, { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] } ]) }; ko.applyBindings(viewModel); </script> </ li> <ul data-bind="foreach: { data: categories, as: 'category' }"> <li> <ul data-bind="foreach: { data: items, as: 'item' }"> <li> <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> </li> </ul> </li> </ul> <script> vair viewModel = { categories: ko.observableArray([ { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] }, { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] } ]) }; ko.applyBindings(viewModel); </script> </ ul> <ul data-bind="foreach: { data: categories, as: 'category' }"> <li> <ul data-bind="foreach: { data: items, as: 'item' }"> <li> <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> </li> </ul> </li> </ul> <script> vair viewModel = { categories: ko.observableArray([ { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] }, { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] } ]) }; ko.applyBindings(viewModel); </script> <script> <ul data-bind="foreach: { data: categories, as: 'category' }"> <li> <ul data-bind="foreach: { data: items, as: 'item' }"> <li> <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> </li> </ul> </li> </ul> <script> vair viewModel = { categories: ko.observableArray([ { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] }, { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] } ]) }; ko.applyBindings(viewModel); </script> vair viewModel = { <ul data-bind="foreach: { data: categories, as: 'category' }"> <li> <ul data-bind="foreach: { data: items, as: 'item' }"> <li> <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> </li> </ul> </li> </ul> <script> vair viewModel = { categories: ko.observableArray([ { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] }, { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] } ]) }; ko.applyBindings(viewModel); </script> }; <ul data-bind="foreach: { data: categories, as: 'category' }"> <li> <ul data-bind="foreach: { data: items, as: 'item' }"> <li> <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> </li> </ul> </li> </ul> <script> vair viewModel = { categories: ko.observableArray([ { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] }, { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] } ]) }; ko.applyBindings(viewModel); </script> ko.applyBindings (viewModel); <ul data-bind="foreach: { data: categories, as: 'category' }"> <li> <ul data-bind="foreach: { data: items, as: 'item' }"> <li> <span data-bind="text: category.name"></span>: <span data-bind="text: item"></span> </li> </ul> </li> </ul> <script> vair viewModel = { categories: ko.observableArray([ { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] }, { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] } ]) }; ko.applyBindings(viewModel); </script> 
    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.