2011-03-06 3 views
7

현재 레일즈 앱과 함께 Backbone.js를 사용하고 있습니다. 내 문제는, 내 레일 애플 리케이션과 백본 컨트롤러 및 뷰를 구현하는 방법을 모르겠다. 많은 자습서를 읽었지 만 항상 백본에서 컨트롤러 하나만 사용하고 있습니다 .js.Backbone.js with Rails

예를 들어 레일에 두 개의 컨트롤러가 있습니다.

  • 활동 컨트롤러
    • 은 두 개의보기, 구글지도와 검색 필드를 포함합니다. Google지도는 백본보기로 삽입되며 searchfield는 HTML로되어 있으며 백본보기를 통해 기능을 가져옵니다.
    • 검색 필드는 내 레일 모델에서 데이터를 가져 와서지도 안의 마커를 표시해야합니다.

그리고 다른 하나는 사용자의 프로필을 볼 때 여기

    • 사용자 컨트롤러이며, 내가 갱신 값과 다른 것들
    같은 일부 AJAX 기능을 추가 할

내 application.js에서 내 사용자 프로필에서 활동 컨트롤러와 레일 활동 컨트롤러에서 사용자 컨트롤러를 필요로하지 않는,

var App = { 
    Views: {}, 
    Controllers: {}, 
    Collections: {}, 
    init: function() { 
     new App.Controllers.Activities(); 
     new App.Controllers.Users(); 
     Backbone.history.start(); 
    } 
}; 

$(function() { 
    App.init(); 
}); 

문제는 사용하여 응용 프로그램을 시작합니다. 어떻게 해결할 수 있을까요? 자바 스크립트 내에서 현재 URL을 읽은 다음 사용 된 컨트롤러를 결정해야합니까? JavaScript 파일을 application.html.erb에 넣고 여기에서 어떤 컨트롤러를 사용해야하는지 결정해야합니까?

또는 backbone.js 컨트롤러를 사용하는 잘못된 방법입니까?

백본의 구조가 잘못되었습니다 .js? 아니면 잘못된 방법으로 컨트롤러를 사용하고 있습니까?

또 다른 질문은 Backbone.js를 통한 자바 스크립트, 특히 jQuery의 기능을 추가하는 방법입니다. 예를 들어, 사용자가 필드를 클릭하면 필드 안의 레이블을 제거하려고합니다. 또는 일부 탭 기능을 수행하고 일부 요소의 가시성을 전환하고 싶습니다. javascript 백본보기를 사용하는 각 요소에 대해 작성해야합니까? 아니면이 과부하입니까?

희망 나는 분명히했고 누구든지 도울 수있다. thx!

답변

2

백본이 제공하는 라우트 기능을 사용하지 않는 이유는 무엇입니까? 활동 제어기에는 활동에 사용하는 라우트, 사용자 핸들링 전용 사용자 제어기 등이 포함됩니다. 이렇게 컨트롤러를 인스턴스화 할 수 있으며 라우팅은 현재 위치의 해시에 따라 어떤 일이 발생할지 결정합니다.

해시가있는 링크를 사용할 수 없거나 페이지에 그러한 링크가없는 경우 필요할 때 현재보기에만 이벤트를 첨부 할 수 있도록 내보기 컨테이너 이름을 지정하면됩니다.

jQuery 플러그인 등은 IMO보기에 속합니다.탭과 입력 힌트 토글도 동일합니다.

일반적인 수준에 업데이트

(나는 하지 반드시 이런 식으로 일을 추천 할 것입니다) : 당신은 두 가지 방법이있는 경우 :

// should be only called for the 'Foo' controller 
function foo() { 
    alert("FOO"); 
}; 

// should be only called for the 'Bar' controller 
function bar() { 
    alert("BAR"); 
}; 

와 원하는을 단 하나의 전화 그것들은 현재의 Rails 컨트롤러에 따라 작은 헬퍼를 만든다 :

예 : 에서 당신 * 도우미/application_helper.rb *

def body_class 
    controller.controller_name 
end 

다음 레이아웃 파일에서이 메소드를 호출 (또는 부분 헤더) :

<body class="<%= body_class %>"> 
… 

및 사용 예를 들어, JS 실행을 "분할"하는 jQuery :

if ($('body').hasClass('foo')) { 
    foo(); 
} else if ($('body').hasClass('bar')) { 
    bar(); 
} 
+0

경로를 사용하는 것이 좋습니다. 하지만 당신이 말했듯이 내 URL에는 해시가 없습니다. 표준 레일 경로를 사용하고 있습니다.어떤 컨트롤러를 선택할지 결정하는 더 좋은 방법이 있습니까? 아니면 backbone.js를 포크하고이 기능을 추가하십시오. 어떻게 생각해? – 23tux

+0

포크가 필요하다고 생각하지 않습니다. 컨트롤러는 클래스 일 뿐이므로 이러한 클래스의 메서드 중 하나를 호출하지 않으면 아무 일도 일어나지 않습니다. 이런 식으로 코드를 "분할"하려는 컨트롤러 내에서 무엇을하는지 설명해 주시겠습니까? (좀 더 일반적인 수준에서 : 나는 현재의 레일즈 컨트롤러에 따라 JS를 호출하는 또 다른 방법을 내 대답에 추가 할 것이다.) – polarblau

+0

thx 여러분의 의견과 업데이트. 그러나 나는 CSS가 어떤 컨트롤러가 사용되어야 하는지를 결정하는 것과 관련된이 방법을 좋아하지 않습니다. 다른 컨트롤러와는 별도로 액티비티 컨트롤러의 JavaScript 코드를 유지하는 것이 더 명확하다고 생각하기 때문에이 코드를 이렇게 분할하고 싶습니다. 예를 들어, 활동 컨트롤러와 사용자 컨트롤러에 맵이 있습니다. 보기는 동일하지만 동작이 다릅니다. 또 다른 방법은, 특정 레일 메소드 내에서 이것을 어떻게 처리 할 수 ​​있습니까 (코드는 컨트롤러의 메소드에만 속합니다, 예를 들어 새로운 액션). – 23tux

1

개인적으로 jammit (백본의 동일한 작성자)을 사용합니다. 스타일 시트와 자바 스크립트 파일을 모듈별로 그룹화하고 다른 페이지에서 사용할 수 있습니다. 따라서 액티비티 뷰를위한 모듈과 사용자 뷰를위한 모듈을 생성하여 각각 필요한 자바 스크립트 파일을 필요로한다. 이것에 대해 두 좋은 일이 :

  • 만 코드 페이지에로드 된 페이지에 사용했다
  • jammit 한 페이지를 작성하지 않을 경우이 방법 당신

위해 모든 가고 comprsses 하나의 컨트롤러에서 다른 컨트롤러로 이동하기 위해 # 경로를 사용하는 웹 앱. 귀하의 경우에는 메인 레일 응용 프로그램 내에 여러 개의 단일 페이지 응용 프로그램이 있습니다.

+0

방해를하는 것이 좋은 방법 일 수 있습니다. 하지만 성능 문제가있을 수 있습니다 궁금하네요. 각 컨트롤러의 자바 스크립트 파일을 하나의 단일 파일로 압축하기 때문에 각 컨트롤러마다 (또는 각 동작마다) 고유 한 파일을 만듭니다. 따라서 새 페이지에 액세스 할 때마다 Backbone.js와 (내 경우에는) jQuery 프레임 워크가로드됩니다. 하나의 파일에 포함되어 있기 때문입니다. 내가 어떻게 처리 할 수 ​​있니? Backbone.js와 jQuery를 Jammit과 별도로 유지 하시겠습니까? 그러나 그때 나는 하나의 JS 파일과 더 적은 수의 HTTP 요청 만 가질 수 있다는 사실로부터 이익을 얻을 수 없다. 어떻게 생각해? – 23tux

+0

jquery & backbone이있는 common.js 파일과 일련의 레일 뷰를위한 js 파일이 있습니다. 그것은 2 개의 요청이되고 common.js 파일이로드되고 캐시되면 1 요청입니다. Jammit은 프로덕션 배포에 사용할 자산 폴더로 파일을 압축합니다. 이 환경에서는 압축하지 않습니다. – Julien

+0

Rails 3.1에서 자산 파이프 라인 기능은 Jammit이 (JS, CSS 용으로) 수행하는 작업을 수행하므로 파일간에 기능을 훌륭하게 구분할 수 있습니다. 더 작은 응용 프로그램의 경우 기본 동작이 더 좋습니다. 모든 JS가 단일 파일로 축소/주석 해제 된/etc를 가져오고 브라우저에서 로컬로 캐시됩니다. 아주 많은 응용 프로그램은 매니페스트 옵션을 사용하여 파일의 패키징 방식과 전송시기를 결정할 수 있습니다. –

1

Im Backbone.js newb입니다. 잘못된 사람이라면 누군가 저를 고치십시오.하지만 백본 컨트롤러가 사용되는 것을 혼란스럽게 생각합니다.

Backbone.js 컨트롤러는 기본적으로 Hailsbang 경로 (Rails 경로와 유사) 및 이러한 경로가 호출하는 작업으로 구성됩니다. 당신은 "이-IS-AMAZING"다음 MyController.MyFirstFunction이 실행됩니다 http://mysite.com/backbone_test#foo/THIS-IS-AMAZING으로 이동 한 경우 다음

var MyController = Backbone.Controller.extend({ 
    routes: { 
    "foo/:bar":   "myFirstFunction" 
    }, 
    myFirstFunction: function(bar){ 
    console.log(bar); 
    }); 

: 예를 들어 당신은 http://mysite.com/backbone_test에서보기를 렌더링하는 레일 경로를 가지고 당신은 다음과 같은 백본 경로가있는 경우 JS 콘솔에 로그인됩니다.

JavaScript 응용 프로그램의 상태를 URL (예 : http://my.app.com/#key=value&key=value&ad-infinitum=true)로 저장하는 것과 같이 이러한 종류의 해시 뱅 관련 기능이 직접적으로 필요한 경우가 아니라면 백본 컨트롤러를 사용하는 것이 좋습니다. 모델 컬렉션 및 뷰를 통해 설명 된 모든 기능을 사용할 수 있습니다.

일반적으로 컨트롤러 및 백본의 좋은 점은 모듈 식과 다른 부분을 독립적으로 사용할 수 있다는 것입니다.

이 대답의 요약은 하나의 페이지 자바 스크립트 애플리케이션이 없다면 백본 컨트롤러를 사용하지 않고 대신 레일 컨트롤러를 사용한다는 것입니다.

+0

입니다.하지만 자바 스크립트 부분이 더 커지면 Backbone.js를 사용할 수있는 단일 페이지 자바 스크립트 앱이 없다고 생각합니다. Backbone.js가 내 컨트롤러와 통신하는 RESTful 방식을 사용할 수 있기를 원합니다. – 23tux

+1

나는 당신이 Backbone.js를 사용해야한다고 말하지 않았다. 실제로 Javascript 코드를 구성하고 스파게티 코드 트랩을 피하기 때문에 Backbone.js를 좋아합니다. 내가 말한 것은 당신이 애플리케이션에서 해시 태그가 지정된 라우트가 필요 없다면 항상 Backbone.js 컨트롤러를 사용할 필요가 없다는 것입니다. –

+0

어, 죄송합니다. 답을 잘못 읽었습니다. 하지만 나는 컨트롤러가 필요없고 백본이 제공하는 많은 것들이 필요 없다는 사실을 알게되었습니다. 이제 모듈에 require.js를 사용하고 있습니다. 너의 대답은 Thx! 여기 정말 멋진 커뮤니티입니다! – 23tux