2012-04-28 2 views
3

나는 내 백본 응용 프로그램을 구성 할 RequireJS를 사용하여 다음과 같이 공유기 모듈은 다음과 같습니다모듈러 Backbone.js 앱에서보기 모듈의 라우터를 어떻게 사용할 수 있습니까?

define([ 
'jquery', 
'underscore', 
'backbone', 
'collections/todos', 
'views/todosview' 
], function($, _, Backbone, TodosCollection, TodosView){ 
var AppRouter = Backbone.Router.extend({ 

    routes: { 
     "": "index", 
     "category/:name": "hashcategory" 
    }, 

    initialize: function(options){ 
     // Do something 
    }, 

    index: function(){ 
     // Do something 
    }, 

    hashcategory: function(name){ 
     // Do something 
    } 
}); 

var start = function(){ 
    p = $.ajax({ 
     url: 'data/todolist.json', 
     dataType: 'json', 
     data: {}, 
     success: function(data) { 

      var approuter = new AppRouter({data: data}); 
      Backbone.history.start(); 
     } 
    });  
}; 

return { 
    start: start 
}; 
}); 

을 그리고 전체 응용 프로그램을 실행하는 데 Router.start()를 사용하는 다른 app 모듈을 가지고있다. 이제 내 Backbone.View 모듈에서이 Router 모듈에서 Router.navigate을 사용하여 경로를 트리거하려고합니다. 다음과 같이 내보기 모듈의 시작 부분은 다음과 같습니다

define([ 
'jquery', 
'underscore', 
'backbone', 
'models/todo', 
'views/todoview', 
'text!templates/todo.html', 
'router' 
], function($, _, Backbone, TodoModel, TodoView, todoTemplate, Router){... 

을하지만이 모듈에 Router를 사용하고자 할 때, 항상 Router is not defined을 말한다. 내가하고 싶은 일은 으로이 뷰 모듈에서 어떤 액션이 시작될 때 호출하는 것입니다. 그럼 내가 어떻게 이걸 얻을 수 있니?

당신은 아마 순환 요구 사항이)

답변

8

사용하는 다른 모든 모듈에 포함 된 별도의 모듈을 작성하십시오. 라우터 인스턴스를 부착하고 나중에 원하는 모든보기 또는 모듈에서 호출 할 수있는 객체를 작성하기 만하면됩니다. (데이터 저장 및 다른 모듈로 쉽게 넘어가는 것과 같은 다른 작업 외에도)

여기에 처음 붙여 넣은 라우터 모듈에이 모듈을 포함하십시오. 라우터 모듈의 하단에서 시작 기능을 제거하십시오. 그리고 그 파일의 끝에 AppRouter를 반환하십시오.

백본 시작과 라우터 만들기를 끝내는 앱 모듈에서 내가 언급했던 공유 객체에 라우터 초기화를 저장할 수 있습니다.

IE,

shared.js -> 없음 deps하지만 만들고 YourObject = {}; YourObject를 반환합니다. router.js -> shared.js 포함 app.js -> shared.js와 router.js가 포함되어 있습니다. 응용 프로그램은 라우터를 설정하고 YourObject.router에 저장 한 다음 백본을 시작합니다. 당신이 무엇

Backbone.history.navigate ('', {트리거 : 사실을}) 사용에 대한 모듈

+0

app.j의 내용에 대해 약간 혼동 스럽습니까? 고마워! – chaonextdoor

+0

app.js는 실제 백본 앱이 시작되는 위치입니다 (위의 "시작"기능과 같습니다). 그냥 기본적인 애플 리케이션 로직. 아무것도 반환하지 않을 것이고 다른 모듈에는 포함되지 않을 것입니다. 앱이 시작되는 곳일뿐입니다. – PStamatiou

+0

'start' 함수를'route' 모듈에서'app' 모듈로 옮기는 것이 무엇입니까? 그리고 나서, 나는'app' 모듈에서 생성 된 라우터 인스턴스를 내 사건의 변수 인'approuter'에 넣어야합니다. share.js의'YourObject {}'에 넣어 두어야합니다. 그리고 나서 어디서나 shared.js를 사용할 수 있습니다. . 내가 맞습니까? – chaonextdoor

3

여기 추측이다. 보기 모듈에 라우터 모듈이 필요하며 라우터 모듈에보기 모듈이 필요합니다.

나쁜 디자인과 같은 냄새가납니다. 라우터 모듈은 뷰/모델을 인스턴스화하고 렌더링하기 위해 뷰/모델에 대해 알아야 할 것입니다. 귀하의 견해는 라우터를 만드는 어딘가에 있다는 것을 모르고 있어야합니다. 그들이해야 할 일은 라우터의 경로를 트리거하는 링크를 제공하는 것입니다.

+0

당신이 말했듯이, 그들이해야 할 일은 라우터 경로를 유발하는 ** 링크 **를 제공하는 것입니다. 그것이 문제이다. 링크를 클릭하는 대신 라우터의 경로를 다른 작업과 연결하려고합니다. 그래서 여기서는 링크를 사용하고 싶지 않고 라우터의 경로를 트리거하기 위해'Router.navigate()'함수를 사용해야합니다. ** 다른 일부 작업 **은 확실히 View 모듈에서 해고됩니다. 그래서, 내 지식에 따라, 나는 내 View 모듈에서'Router.navigate()'를 사용해야한다. 아니면이 문제를 해결할 다른 방법이있을 수 있습니다. 아니면 RequireJS 및/또는 백본에 대한 오해가있을 수 있습니다. – chaonextdoor

+0

그 다음에는 길을 유발하는 화재 사건이 발생합니다! – ggozad

+0

라우터가 location.href 및 location.hash의 변경 사항을 수신 대기합니까?따라서 위치를 변경하면 효과가 있습니다. 개인적으로 'window.location.replace ('# login ')'로 로그 아웃 페이지로 리디렉션 뷰를 보았습니다. – andho

0

을 shared.js이 필요한 곳 ​​이제 다른 모듈에서 YourObject.router.navigate()를 호출 할 수 있습니다;

관련 문제