2012-04-10 4 views
5

Привет всем,

Теперь моя четвертая попытка реализовать history.js в приложении Rails. У меня есть один подход, который работает вполне нормально, но код настолько уродлив. Сегодня я снова посмотрел на код и подумал: «Как я могу сделать это лучше, проще, более СУХОЙ ?!Как сделать history.js в Rails правильным способом?

То, что я сделал до сих пор (и работает достаточно хорошо, но не идеально):

  • Набор remote: true мои ссылки
  • Jquery-UJS делает выборку js.erb

Мой HTML выглядит :

<body> 
    <div id="content"> 
    some content with buttons, etc. 
    </div> 
</body> 

js.erb содержит:

History.pushState(
    { 
    func: '$(\'#content\').html(data);', 
    data: '<%= j(render template: "news/index", formats: [:html]) %>' 
    }, 
    'test title', 
    '<%= request.url %>' 
); 

И затем history.js выполняет функцию и дает ей данные. Таким образом, он заменяет content -div новым сгенерированным кодом. И он также обновляет URL. Этот код мне нужно вставить в каждый (!) Файл js.erb.

Мои последние мысли, чтобы сделать его немного менее некрасиво были:

  • Набор remote: true мои ссылки
  • Когда канал получает щелкнул, выбирающий некоторые js.erb который заменяет content -Div
  • Все ссылки с data-remote="true" получите ajax:success -handler
  • на ajax:success новый URL получает толкнул history.js

Но все еще есть одна проблема. Тогда у меня есть JavaScript код:

$(document).on('ajax:success', 'a[data-remote="true"]', function() { ... }); 

Проблема в том. ajax:success не срабатывает, если я заменю div -tag где ссылка (который должен сгореть случай) был в

Может быть, кто-то может решить мои проблемы ...

Или есть лучший способ?

+0

Вы видели jquery.pjax? –

+0

Я посмотрел на страницу histoy.js кучу раз, но никогда не пытался приложить усилия, чтобы попробовать. Мне бы очень хотелось, чтобы этот вопрос ответил четко. – Ashitaka

+0

PJAX - только HTML5. HTML4-браузеры просто получают нормальные ссылки ... С history.js мы получим AJAX для браузеров HTML4 тоже –

ответ

0

насчет:

History.Adapter.bind(window, 'statechange', function() { 
    var state = History.getState(); 
    ... 
}); 
0

Я использую beforeSend события как мировой слушатель для всех данных-пульта дистанционного управления, чтобы изменить обрабатывать историю браузера. Я предпочитаю beforeSend, потому что хочу, чтобы ссылка менялась, как только она была нажата, независимо от результата запроса ajax ...

$(document).bind('ajax:beforeSend', function(event,data){ 
    history.pushState(null, '', event.target.href) 
}); 

Это решит вашу проблему, так как мероприятие будет запущено до того, как будет выполнена любая модификация DOM.

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