백본 컬렉션을 표시합니다 (컬렉션 모음은 아마도?)

js 파일;백본 컬렉션을 표시합니다 (컬렉션 모음은 아마도?)

var dataModel = Backbone.Model.extend({ 
      defaults : { 
       dataID : 'unknown', 
       text : 'unknown' 
      } 
     }); 
     var LinkCollection = Backbone.Collection.extend({ 
      model : dataModel 
     });

은 컬렉션 크기가 8이라고 할 수 있습니다. 한 번에 3 개씩 표시하고 싶습니다. 스크립트의 구조로 인해 컬렉션 항목을 별도 div로 나누어야합니다.

html 파일;

<div class="item"> 
<div class="carousel-subItem"> <-- Collection item #1 
    <span>{{dataID}}</span> <br /> <span>{{text}}</span> 
</div> 
<div class="carousel-subItem"> <-- Collection item #2 
    <span>{{dataID}}</span> <br /> <span>{{text}}</span> 
</div> 
<div class="carousel-subItem"> <-- Collection item #3 
    <span>{{dataID}}</span> <br /> <span>{{text}}</span> 
</div> 
</div> 


<div class="item"> 
<div class="carousel-subItem"> <-- Collection item #4 
    <span>{{dataID}}</span> <br /> <span>{{text}}</span> 
</div> 
<div class="carousel-subItem"> <-- Collection item #5 
    <span>{{dataID}}</span> <br /> <span>{{text}}</span> 
</div> 
<div class="carousel-subItem"> <-- Collection item #6 
    <span>{{dataID}}</span> <br /> <span>{{text}}</span> 
</div> 
</div> 

<div class="item"> 
<div class="carousel-subItem"> <-- Collection item #7 
    <span>{{dataID}}</span> <br /> <span>{{text}}</span> 
</div> 
<div class="carousel-subItem"> <-- Collection item #8 
    <span>{{dataID}}</span> <br /> <span>{{text}}</span> 
</div> 
</div>

이 html 구조를 동적으로 생성하는 데 어려움을 겪고 있습니다. 컬렉션의 크기 캔이 다양하기 때문에 (... 구조는 완전히 동적 등되어야한다

{{#each dataModel}} 
    // code goes here, to create the above structure.. 
{{/each}}

출처

2012-10-22 myTD

어쩌면이 같은 당신을 도울 수

: 나는 가정했다

<script type="text/tempalte" id="template"> 

<% var len = items.length, group = 3, i; %> 
<% for (i = 0; i <len; i += 1) { %> 
    <% if (i % group === 0) { %> 
     <div class="item"> 
    <% } %> 
     <div class="carousel-subItem"> 
      <span><%= items[i].dataID %></span> <br /> <span><%= items[i].text %></span> 
     </div> 
    <% if ((i % group === group-1) || (i === len -1)) { %> 
     </div> 
    <% } %> 
<% } %> 
</script>

은 밑줄을 사용하고 싶습니다 . 당신이 백본을 사용하는 것처럼 항목 컬렉션 뷰의 백본 포인트에 가까워 야 이런 식으로 뭔가를 보이는 :

var items = [ 
    { dataID : '1', text : 'bla' }, 
    { dataID : '2', text : 'blab' }, 
    { dataID : '3', text : 'gulp' }, 
    { dataID : '4', text : 'golp' }, 
    { dataID : '5', text : 'bla' } 
]; 

// compiling the template 
var template = _.template($('#template').html()); 
console.log(template(items));

출력은 다음과 같습니다 :

<div class="item"> 

     <div class="carousel-subItem"> 
      <span>1</span> <br /> <span>bla</span> 
     </div> 



     <div class="carousel-subItem"> 
      <span>2</span> <br /> <span>blab</span> 
     </div> 



     <div class="carousel-subItem"> 
      <span>3</span> <br /> <span>gulp</span> 
     </div> 

     </div> 



     <div class="item"> 

     <div class="carousel-subItem"> 
      <span>4</span> <br /> <span>golp</span> 
     </div> 



     <div class="carousel-subItem"> 
      <span>5</span> <br /> <span>bla</span> 
     </div> 

     </div>

내가 더 나은 방법은 용기에 렌더링 ItemViews 결합을 담당은 "회전 목마 하위 항목"-div과 CollectionView를 렌더링 ItemView을 가지고있을 것이라고 추가 할 수 있습니다. 백본이라고 생각합니다. 마리온네트는 그걸 제공합니다. 아마 당신은 그것을 확인하고 싶습니다. 물론, 당신도 당신 자신의 것으로 그것을 만들 수 있습니다.

출처

2012-10-22 21:31:47 bentrm

왜 로직을 렌더링으로 이동하지 않습니까? – chchrist

무엇의 렌더링? – bentrm

Backbone'render' 메쏘드는 OP와 같이 Handlebars 템플릿에서 작동 할 수 있습니다. –

백본 컬렉션을 표시합니다 (컬렉션 모음은 아마도?)

답변

관련 문제