CoffeeScript/Backbone/Marionette - 자습서 예제 변환 및 범위 지정 문제

Question

이 예제의 기본 버전을 CoffeeScript로 작성하려고합니다 : http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/. 모든 의존성은 내가 작성한 순서대로 .coffee 파일로 선언되며 jQuery + Underscore + Backbone + Marionette가 머리에 있습니다. 나는 모델이

, thing.coffee

$ -> 

    console.log 'load model' 

    class Thing extends Backbone.Model 

    defaults: 
     myValue: null 

    initialize: -> 
    console.log 'new thing' 

    window.Thing = Thing 

나의 첫번째 딸꾹질은 범위 지정 함께 : 나는를 찾을 수 없습니다 window.Thing, 다음 파일 (Things의 컬렉션을 선언하지 않는 경우 Thing 모델, 등등. 내가 잘못이 무엇을하고 있는가? 나는 컬렉션이

을 things.coffee

$ -> 

    console.log 'load collection' 

    class Things extends Backbone.Collection 

    model: Thing 

    window.Things = Things 

가 나는 마리오네트보기를, thing_view.coffee

$ -> 

    console.log 'load composite model view' 

    ThingView = Backbone.Marionette.ItemView.extend(
    template: '#template-thing' 
    tagName: 'tr' 
) 

    window.ThingView = ThingView 

나는 마리오네트보기를, things_view.coffee

$ -> 

    console.log 'load composite collection view' 

    ThingsView = Backbone.Marionette.CompositeView.extend(
    tagName: 'table' 
    id: 'things' 
    template: '#template-things' 
    itemView: ThingView 
    appendHtml: (collectionView, itemView) -> 
     collectionView.$('tbody').append itemView.el 
) 

    window.ThingsView = ThingsView 

나는 응용 프로그램 myapp.coffee

에게 있습니다

$ -> 

    console.log 'load app' 

    # Load default data 
    thingsCollection = new Things([ 
    new Thing(myValue: 'uno'), 
    new Thing(myValue: 'dos') 
    ]) 

    data: 
    thingsCollection: thingsCollection 

    # Create application, specify default layouts 
    MyApp = new Backbone.Marionette.Application() 
    MyApp.addRegions singleRegion: '#content' 

    # On application init... 
    MyApp.addInitializer (data) -> 
    console.log 'Init application...' 
    thingsView = new ThingsView(collection: data.thingsCollection) 
    MyApp.singleRegion.show data.thingsView 

    # Start application 
    MyApp.start data 

사물의 난 확실히 프로그래머 톤 -

가

load model 
load collection 
load composite model view 
composite collection view 
load app 
Init application... 
Uncaught TypeError: Cannot call method 'render' of undefined 

그래서, 무슨 일이 일어나고 있는지에 관해서는 혼란 스러워요 말할 필요도없이 :

<div id="content"> 
    <script type="text/template" id="template-things"> 
     <thead> 
      <tr class='header'> 
      <th>myValue</th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </script> 
    <script type="text/template" id="template-thing"> 
     <td><%= myValue %></td> 
    </script> 
</div> 

가 console.log에 따라 : 같은

내 html 파일 보인다 여기에 잘못이 있으니 도와주세요!

Answer 1

내가 window.Thing를 선언하지 않는 경우, 다음 파일 (Things의 수집, 모델 Thing을 찾을 수없는, 등등. 내가 잘못이 무엇을하고 있는가?

커피 스크립트 컴파일러는 각 파일을 자체 실행 함수로 랩핑하므로 window에 넣음으로써 강제로 전역 화하지 않는 한 Thing은 랩퍼에 로컬입니다.

나는 당신의 진짜 문제는 바로 여기에 생각 :

MyApp.addInitializer (data) -> 
    console.log 'Init application...' 
    thingsView = new ThingsView(collection: data.thingsCollection) 
    MyApp.singleRegion.show data.thingsView 

당신은 ThingsView을 만들고 thingsView에 저장합니다. 그러나 data.thingsView을 MyApp.singleRegion.show으로 전달하려고 시도하지만 data.thingsView에는 아무 것도 없으므로 Marionette 내부에서 무언가가 view.render() 일 때 불만을 토로합니다. 난 당신이 원하는 생각 :

thingsView = new ThingsView(collection: data.thingsCollection) 
    MyApp.singleRegion.show thingsView 

나이 :

data.thingsView = new ThingsView(collection: data.thingsCollection) 
    MyApp.singleRegion.show data.thingsView 

이 data 객체가 모든에 대해 무엇에 따라 달라집니다.

Answer 2

window.Thing은 Coffeescript의 전역 이름 공간 오염 방지의 부산물입니다. 그 주위를 빠져 나가는 관용적 인 방법은 use an App namespace입니다.

DOM로드에서만 클래스를 초기화하는 것은 Backbone anti-pattern입니다. 클래스의 네임 스페이스를 지정하면 올바른 순서 (컬렉션 뷰 이전의 항목보기)로로드해야하며 페이지가로드 된 후 즉시 생성 될 수 있습니다.

Uncaught TypeError이 어디에서 발생하는지 아이디어를 제공 할 수 있습니까?