2014-09-05 3 views
0

Чтобы избежать погружения в интерфейсный интерфейс, я создаю одностраничное приложение, используя только Rails и jQuery.Rails + jQuery SPA Маршрутизация

Вот основная структура:

контроллер

class MainController < ApplicationController 

def index 
    respond_to do |format| 
    format.html 
    end 
end 

def complex_query_1 
    @items = # complex query 

    respond_to do |format| 
    format.js { render 'refresh.js.erb', :locals => { :items => @items } } 
    end 
end 

def complex_query_2 
    @items = # a different complex query 

    respond_to do |format| 
    format.js { render 'refresh.js.erb', :locals => { :items => @items } } 
    end 
end 

end 

application.js

$(document).ready(function() { 
    showActivityIndicator(); 
    $.get(Routes.complex_query_1_path()); 
}); 

Когда пользователь впервые посещает приложение, они показаны @items из complex_query_1. Чтобы избежать длительного времени для запроса запуска, я реализовал более «SPA» стиль загрузки:

  1. Когда пользователь посещает приложение, то index действие запускаемое и служит основной макет.

  2. Затем индикатор нагрузки и POST-запрос для complex_query_1 запускаются через js.

  3. Действие реагирует на js и обновляет представление через jQuery.

Все внутренние ссылки AJAX, поэтому базовая компоновка никогда не перезагружается, сохраняя ощущение «SPA».

Я попал в блокпост с маршрутизацией извне приложения. Например, если я перейду к /complex_query_2 извне приложения, не будет отображаться макет html. Я мог бы указать макет format.html, но затем длинный запрос должен загружаться до того, как будет отправлен html.

Есть ли альтернативный/лучший способ структурирования приложения для SPA-ощущения?

ответ

0

В одном из приложений, которые используют некоторые приложения, используются фрагменты в URL-адресе, чтобы определить, как приложение должно отвечать.

Так что ваша внешняя ссылка должна быть

/index#complex_query_2 

Путь индекс обеспечит расположение HTML, и вы можете разобрать URL в JavaScript, чтобы получить complex_query_2 часть. Затем используйте это, чтобы определить, какие действия следует предпринять.

Смежные вопросы