2013-02-26 2 views
2

다음 Ember.js/Require.js 응용 프로그램이 인덱스보기를 렌더링하지 못하는 이유를 확인하는 데 도움을 줄 수 있습니까? Ember 세그먼트는 100 % 격리되어 작동합니다. application.htmlEmber - RequireJS

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <script data-main="../script/application" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.4/require.min.js"></script> 
    </head> 
    <body> 
    <script type="text/x-handlebars-template" data-template-name="index"> 
     login page 
     <a href="#" {{action "login"}}>Login</a> 
    </script> 
    <script type="text/x-handlebars-template" data-template-name="application"> 
     {{outlet}} 
    </script> 
    </body> 
</html> 

내가 더 스크립트 오류가 사파리 나 크롬에서 표시되지 다음 파일이 성공적으로 필요로하고 있음을로드되었는지 확인했다

require(["library/jquery", "library/handlebars", "library/ember"], function() { 
    Application = Ember.Application.create({ 
     LOG_TRANSITIONS: true 
    }); 

    Application.IndexView = Ember.View.extend({}); 

    Application.IndexController = Ember.Controller.extend({ 
     login: function() { 
      console.log("called login controller method."); 
     } 
    }); 

    Application.Router.map(function() { 
     this.route("index", { 
      path: "/login" 
     }); 
    }); 
}); 

application.js 브라우저. application.html

    • ember.js
    • handlebars.js
    • jquery.js
    • require.min.js
를 application.js

버전 정보

가 필요 : 2.1.4

jQuery를 : v1.9.1

엠버 : v1.0.0 개발자 - rc.1

핸들 바 : 1.0.0-rc.3

+0

나는 다른 라이브러리와 반대와 함께 사용하기 requirejs 하드 발견했다. 그래서 내가 사용하기가 훨씬 쉬우 며 각도로 테스트 한 라이브러리를 만들었습니다. 하단에 데모 애플리케이션이있다 : gngeorgiev.github.io/Modulerr.js 당신은 또한 Modulerr.js –

답변

4

그래서 언젠가는 머리를 두드리며 밤을 새긴다.나는 마침내 Ember의 예를 얻었다. & 좋은 연주가 요구된다.

https://github.com/ben-crowhurst/EmberRequireSetup

몇 가지 문제는 엠버 설정 및 DOM 구문 분석의 타이밍과 함께 응용 프로그램 모듈/종속의로드에 관한 발견되었다.

+1

에 의존하지 않고 하나에 모든 스크립트를 결합 할 수 있습니다 나는 누군가가 당신을 이길 수도 생각합니다. https://github.com/zeflasher/ember-require-js – Blowsie

2

이 문제는 함수 본문에 종속성을 전달하지 않아 발생할 수 있습니다. 그렇게하지 않으면 모든 종속성이 전역 범위에 '탑재 된'경우에만 작동합니다 (requirejs의 장점 중 하나는 그 모든 것에 대해 걱정할 필요가 없다는 것입니다).

이 시도 :

require(["library/jquery", "library/handlebars", "library/ember"], 
    function($, handlebars, Ember) { 

    // verify that none of these is undefined 
    console.log($, handlebars, Ember); 

    var Application = Ember.Application.create({ 
     LOG_TRANSITIONS: true 
    }); 

    (...) 
}); 

를 콘솔에 인쇄 된 변수 중 하나가 당신의 requirejs 구성이 올바르지 않은 징조가 여전히 undefined 경우. Chrome의 개발 도구를 강력하게 추천 할 수 있습니다. 함수 본문의 첫 번째 줄에 중단 점을 설정하고 응용 프로그램이 고정 될 때 로컬/클로저 범위를 조사 할 수 있습니다. "포착되지 않은 예외에 대한 일시 중지"는 또한 많은 도움이됩니다.

또한 모듈 내에서 전역 개체를 만드는 것을 피하는 것이 좋습니다 (응용 프로그램 변수에 var을 추가 한 이유입니다). 모듈의 목적 중 하나는 외부의 '누출'을 엄격하게 제한하는 것입니다.

마지막으로 requirejsHandlebars 코드가 <script> 태그 안에 저장되어 있다고 확신하지 않습니다. Handlebars은 브라우저가 처리 할 시간이로드됩니다 (application.html). 나는 handlebars을 한번도 사용하지 못했지만 만약 그렇다면 나는 이것을 처리하는 올바른 방법이 이미 어딘가에 있다고 확신한다.