Requirejs2 : 자체 파일을 처리하는 방법?

Question

핵심 라이브러리 (jquery, 밑줄, 백본)를로드하려면 requirejs를 구성했습니다. 이제는 백본 모델, 컨트롤러, 뷰 등을 비동기 적으로로드 할 수 있도록 추가하고 싶습니다.

이 주제에 대한 많은 자습서와 많은 "준비된"상용어가 유감스럽게도 대부분의 접근 방법이 약화되거나 오히려 복잡한 (더 나은 접근법조차도).

한 예는 내가 주 libs와에 대한 requirejs 구성하는 방법입니다 : 그래서 https://stackoverflow.com/a/10914666/1309847

을 어떻게 간단하고 유효한 Requirejs 구성과 백본보기, 모델, 컬렉션, 라우터, 컨트롤러 및 템플릿을로드합니까?

:

내가 개봉 조언을 따라하지만 이상한 오류가

main.js

require.config({ 
    paths: { 
     jquery: 'vendors/jquery/jquery', 
     underscore: 'vendors/underscore/underscore', 
     backbone: 'vendors/backbone/backbone' 
    }, 
    shim: { 
     underscore: { 
      exports: '_' 
     }, 
     backbone: { 
      deps: ['underscore', 'jquery'], 
      exports: 'Backbone' 
     } 
    } 
}); 

require(['app'], function(app){ 

}); 

는 app.js에

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){ 
    var Message = new Backbone.Model.extend({ 
     //idAttribute: '_id', 
     //defaults: { body: '' } 
     //url: function(){ return this.id ? '/messages/' + this.id : '/messages'; } 
    }); 

    var newMessage = new Message({ body: 'hi' }); 
    newMessage.save(); 
}); 

오류 occours을 app.js

Uncaught TypeError: Object [object Object] has no method 'apply' 

새 Backbone.Model.extend 부분에 주석을 달았을 때 더 이상 오류가 발생하지 않습니다.

Answer 1

내 경험에 의하면, 응용 프로그램을 부트 스트랩하는 가장 좋은 방법은 Backbone.Router를 작성하는 것이다. 따라서 응용 프로그램 기능과 URL을 연결할 수 있습니다. RequireJS + 백본을 사용하는 경우 RequireJS가 구성된 main.js (경로, shims 등)가있을 것입니다. "require"에 대한 첫 번째 호출은 전체 앱을 부트 스트랩하기 위해 초기 스크립트를로드하는 데 사용됩니다. 예를 들어 는 :

/** 
* main.js - RequireJS bootstrap 
*/ 
require.config({ 
    paths: { 
    //your paths 
    }, 
    shim: { 
    //your shims 
    } 
}); 

require(
    [ 
    'app' //app.js is at the same directory as main.js 
    ], 
    function(app) { 
    app.init(); 
    } 
); 

는 app.js에 새 라우터 인스턴스를 만들 수 있습니다, 또는 당신은 단지 뷰와 모델을 만들기 시작할 수 있습니다.상기 참고 용

는 : http://addyosmani.github.com/backbone-fundamentals/

Answer 2

이제 저는 올바르게 이해했습니다. 사용자 정의 js 파일 주위에 requirejs 함수를 포함해야합니다.

함수는 정의라고합니다. 첫 번째 매개 변수는 main.js 파일에 정의한 종속성의 배열이거나 다른 사용자 정의 js에 대한 상대 경로입니다. 두 번째 매개 변수는 원본 파일을 보유하는 콜백입니다. 중요한 것은 공유하려는 객체, 함수, 배열 또는 변수를 반환한다는 것입니다.

모든 것은 다음과 같습니다

define(
    ['underscore', 'backbone'], // the dependencies (either relative paths or shortcuts defined in main.js 
    function(_, Backbone){ // the return statement of the deps mapped to a var 
     var MessageModel = Backbone.Model.extend({ // the original code, file 
      defaults: { body: '' }, 

      initialize: function(){} 
     }); 

     return MessageModel; // the return statement, sharing the "final result", sometimes you return the initialize parameter 
    }); 

모음에 대한 동일한 포장 모델 :

define(
    ['jquery', 'underscore', 'backbone', 'models/message_model'], // deps and the last one is the relative path 
    function($, _, Backbone,MessageModel){ // same as above explained 
var MessageCollection = Backbone.Collection.extend({ 
    model: MessageModel, 

    initialize: function(){} 
}); 

return MessageCollection; 

});

이제 전체 응용 프로그램에 어떻게 부트 스트랩을 할 수 있는지 알아야합니다. 그러나 나는 이것을하기 위해 백본에 대한 더 많은 지식이 필요하다고 생각한다 :