2013-02-23 2 views
2

누구나이 백본 프로젝트에서이 플러그인을 사용해 본 경험이 있는지 궁금 할 것입니다.Backbone.js와 Handlebars - grunt-contrib-handlebars 사용

모든 스크립트 템플릿 태그를 단일 색인 파일에 두는 대신 필요한 템플리트와 동일한 디렉토리에 내 템플리트를 저장하려고했습니다.

그래서 노드 옵션을 사용하여 로컬 템플릿을 필요로하고 렌더링 한 다음 인덱스 파일의 #id에 추가 할 수 있었으면 좋겠다.

그래서 기본적으로 내 백본보기 인 index.coffee와 함께 내 핸들 막대 템플릿 (template.hbs)과 해당 컴파일 된 js (template.js)가 있습니다.

class CardList extends Backbone.View 
    template: require('./template') 


    … 
    do some other shiz 
    … 


render: => 
    template = Handlebars.compile($(this.template).html()) 
    html = template 
     model: this.model 
    $(this.el).html(html) 
:

내 백본보기 (index.coffee)에서
handlebars: { 
     compile: { 
     options: { 
      namespace: 'MyApp.Templates', 
      node: true 
     }, 
     files: { 
      "public/coffee/views/card/list/template.js": "public/coffee/views/card/list/template.hbs" 
     } 
     } 
    }, 

내가 핸들을 요구하는 기대했다가과 같이 템플릿 : 그냥 참고로

public 
    |_ coffee 
     |_views 
     |_card 
      |_list 
       index.coffee 
       template.hbs 
       template.js 

내 툴툴 거리는 소리 파일은 다음과 같다

이 렌더링은 관리자가이 오류를 내고 있습니다.

Uncaught [object Object] 

> template = handlebars.compile($(this.template).html()); 

나는 분명히 내가하는 일을 모른다. 누군가가이 플러그인을 올바르게 사용할 수있는 방법을 밝힐 수 있기를 바란다.

나는 툴툴 거리는 소리-있는 contrib-핸들 v0.3.5

어떤 도움에 감사드립니다 사용하고 있습니다.

감사합니다.

+0

[이 솔루션을보십시오. 나는 그것을 핸들과 함께 구현하고 browserify] (http://stackoverflow.com/questions/22511292/grunt-contrib-handlebars-configuration-issue/26753155#26753155) –

답변

2

포함하고있는 template.js 파일을 확인하십시오. grunt-comtrib-handlbars는 Javascript 함수로 미리 컴파일해야하므로 Handlebars.compile을 더 이상 호출 할 필요가 없습니다. 그 template = Handlebars.compile 줄을 지울 수 있습니다.

3

building the files object dynamically으로 달성 할 수 있습니다.

어쩌면 cwd이 globbing 패턴을 지원하는지 확신 할 수 없겠지만 어쩌면 이와 비슷한 것일 수 있습니다. destcwd과 관련이 있는지 확실하지 않습니다. 그렇지 않은 경우이 방법은 효과가 없지만 한 번만해볼 가치가 있습니다.

handlebars: { 
    dist: { 
    options: { 
     namespace: 'MyApp.Templates', 
     node: true 
    }, 
    // Glob for a directory of files, builds the files object, then map each 
    // one to a new destination file. 
    expand: true, 
    cwd: './public/coffee/views/*', 
    src: '**/*.hbs', 
    dest: './', 
    ext: '.js' 
    } 
}, 
관련 문제