Backbone.js의 기존 HTML에서 컬렉션을 만드는 방법은 무엇입니까?

Question

Backbone.js를 프로젝트에 통합하고 사이드 바 컬렉션을 만드는 데 문제가 있습니다.

문제는 Smarty html-markup에서 생성 된 모델을 모델 컬렉션으로 변환하는 방법입니다. 앞면에 템플릿을 사용하는 일반적인 해결책이지만 내 경우에는 비현실적입니다.

내 사이드 ​​바의 마크 업 :

<div class="nav-blocks"> 
{foreach from=$mod.nodes item=section} 
    <div class="nav-block"> 
    <h2>{$section.title}</h2> 
    <ul class="navigation"> 
    {foreach from=$section.nodes item=i} 
     <li>{$i.title}</li> 
    {/foreach} 
    </ul> 
    </div> 
{/foreach} 
</div> 

내가 모델에 묶여 각 .nav-block 만들고 싶어 :

var Navigation = Backbone.Model.extend({ 
    defaults: { 
    'visible': true 
    } 
}); 

을 그리고보기에서 이벤트를 트리거 할 때, 모델의 변화가 눈에 보이는 속성 :

var NavigationView = Backbone.View.extend({ 

    el: $('.nav-block'), 

    events: { 
    'click h2': 'toggleVisible' 
    }, 

    initialize: function() { 
    this.model.bind('change:visible', this.render, this); 
    }, 

    toggleVisible: function() { 
    this.model.toggle('visible'); 
    }, 

    render: function() { 

    } 

}); 

Answer 1

.nav-block divs 프론트 엔드에서 생성하지 않은 부분은 뷰를 만드는 JQuery와 선택기에 루프가 있고 모델에 각 넥타이와 설정이 JQuery와에 당신은이 방법으로 기존의 HTML 마크 업에 백본 뷰를 적용 할 수 있습니다 view.setElement()

Answer 2

사용하여 반환 된 객체 EL를 볼 :

$(function() { 
    $('.nav-blocks > .nav-block').each(function(index, el) { 
     new NavigationView({ model: new Navigation(), el: el }); 
    }); 
}); 

을

http://jsfiddle.net/rJDy4/