2013-02-13 26 views
23

Tôi đang làm việc trên một ứng dụng chỉ phía máy khách mới với phiên bản mới nhất của Ember.js. Có một trang PHP đơn giản xây dựng các tập lệnh, css, tệp mẫu, v.v. và cung cấp tất cả nó vào index.php. Tôi đang sử dụng một chỉ thị htaccess để tất cả các yêu cầu được viết lại /index.php. PHP là chỉ có để thuận tiện gói Javascript, như xa như tôi đang quan tâm.Ứng dụng Javascript phía máy khách - định tuyến url không có thẻ băm

Hiện tại, các tuyến đường trong trình duyệt trông như thế này và hoạt động tốt.

/#/about 
/#/favorites 
/#/etc 
/#/posts/5/edit 

Tuy nhiên, tôi muốn chúng trông như thế này - không hoạt động tốt.

/about 
/favorites 
/etc 
/posts/5/edit 

Mã máy khách chính xác vẫn được gửi cùng với tùy chọn thứ hai - nhưng luôn luôn truy cập trình xử lý tuyến đường chỉ mục. Tôi đã nhìn thấy các ứng dụng phía máy khách kéo điều này ra trước đây - tôi đang thiếu gì? Tôi có cần phải có trình xử lý tuyến đường phù hợp ở phía PHP không?

Chỉnh sửa: Tôi đang tìm một câu trả lời cụ thể về cách tiếp cận vấn đề này. Web có đầy đủ thông tin "oh - bạn chỉ cần làm điều này" khiến mọi người khác gãi đầu.

Trả lời

48

Trong Ember.js (phiên bản 1.0.0rc3) này có thể được thực hiện bằng cách sử dụng Ember.js location API:

App.Router.reopen({ 
    location: 'history' 
}); 

Và sau đó thiết lập các máy chủ web để chuyển hướng truy cập đến các ứng dụng Ember.

Để cung cấp cho một ví dụ cụ thể ở đây là một cơ bản Apache .htaccess tập tin chuyển hướng lượng truy cập vào các ứng dụng Ember nằm ở index.html:

RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule ^(.*)$ /index.html#$1 [L] 

Như Alex White points out Apache 2.2.16 trở lên hỗ trợ một cấu hình đơn giản hơn cho chuyển hướng lượng truy cập vào một mục tiêu duy nhất:

FallbackResource /index.html 

các FallbackResource là một phần của mô-đun mod_dir và đòi hỏi AllowOverride Indexes được thiết lập.

Đảm bảo kiểm tra kỹ các tuyến ứng dụng. Một lỗi phổ biến là Uncaught SyntaxError: Unexpected token <, được gây ra do sử dụng liên kết tương đối với tệp CSS và JS. Chuẩn bị chúng với một dấu hiệu / để làm cho chúng tuyệt đối.

Chức năng này là not supported in Internet Explorer <10.

+3

omg - Tôi đã tìm kiếm câu trả lời này mãi mãi ... – nbsp

+1

Có cách nào để thực hiện điều này trong bộ định tuyến Rails không? – mehulkar

+0

Xin chào! Vì vậy, tôi đã làm điều này, và nhận được nó lỗi miễn phí cho 'localhost', nhưng làm mới VẪN không hoạt động. Tôi đã phải thêm một dòng để cho phép giao tiếp với cá thể 'couchdb' của tôi: ' RewriteCond% {REQUEST_FILENAME}!^_ Couch (. *) $ ' Tôi đang sử dụng Chrome để thử nghiệm, có suy nghĩ gì không? – blaineh

0

Có, bạn cần phải có các tuyến đường phù hợp ở phía máy chủ. Không sử dụng thẻ băm cũng sẽ buộc tải lại trang, làm chậm mọi thứ xuống và có thể gây ra nhiều làm mới hơn mức cần thiết.

Ngoài ra, bạn cần chuyển trạng thái qua máy chủ hoặc sử dụng một số biến thể của bộ nhớ cục bộ của trình duyệt.

1

@Pascal: Ông ấy không nói về làm mới trang thực tế, nhưng thay vì sử dụng Ember của history (location: 'history').

Để trả lời câu hỏi của bạn, bạn cần phải định cấu hình .htaccess để phân phát nội dung như bình thường cho JavaScript. Khi URL của bạn được định cấu hình để tải ứng dụng của bạn, thì Ember sẽ quản lý mọi thứ cho bạn như bình thường từ URL.

+0

Bạn có thể trỏ đến ví dụ về cách định cấu hình .htaccess cho mục này không? –

8

Tốt hơn so với một RewriteRule, bạn có thể sử dụng điều này cho Apache 2.2.16+:

FallbackResource /index.html 

trong cấu hình Apache của bạn để các RewriteRule không cần phải chạy cho mọi yêu cầu. Điều này sẽ đảm bảo mọi tuyến đường trong ứng dụng ember của bạn rơi vào tệp index.html.

Các vấn đề liên quan