Правильный способ обработки глубоких ссылок с помощью адреса jQuery

Я использую адрес jQuery для обработки глубоких ссылок с моим приложением AJAX. Мои URL-адреса в формате: example.com/#/section/item/param/param/param... У меня есть настройки с .change() слушатель для обработки разных частей URL. Так /project/my-project/view-item/2/compose будет открывать окно создания под этим проектом и этим элементом. Проблема в том, что всякий раз, когда URL-адрес изменяется на это, вызывается каждое действие до этого момента. (Действия, которые происходят, когда URL просто /project/my-project позвони и так далее.)

Каков наилучший способ справиться только с тем действием, которое я хочу, не "поднимаясь по цепочке"?

Источник

3 ответа

Решение

Переменная события передается в change функция со свойствами: value, path, pathNames, parameterNames, parameters, queryString, Свойство, которое вы хотите контролировать pathNames,

Вот несколько отрывков, которые я собрал, которые помогут вам отследить, насколько вы глубоки, а также что именно изменилось:

var $current_path = window.location.hash;
$.address.change( function(event) {

   // get the difference in the two paths
   $changed_path = event.path.replace(new RegExp('^'+$current_path,'i'), '');

   // make sure we update the current path
   $current_path = event.path;

   // how deep is the new path?
   $level = event.pathNames.length;

   // break the changed part into segments, ignoring leading/trailing slashes
   $changed_path_array = $changed_path.replace(/^\/|\/$/g, '').split('/');

   // let's see what level actually changed from the current path
   $changed_level = $level - $changed_path_array.length;

} );

Затем вы можете организовать оставшуюся часть своей функции, используя новую глубину в сочетании с массивом сегментов, чтобы точно определить, что нужно обновить. Основываясь на $ current_path, вы можете выполнить новую загрузку страницы или просто внести небольшие изменения где-то на странице.

Источник

Похоже, что для расширенной маршрутизации на стороне клиента может быть полезно использовать что-то более встроенное, например PathJS. Он очень прост в использовании и позволит вам сделать что-то гораздо более простое и элегантное, например:

// Define a route
Path.map("#/project/my-project/view-item/:id/compose").to(function(){
    var id = this.params["id"]; //get your ID
    $("#panel_" + id).show(); // Do something with the id.
});

// Start listening for changes
Path.listen():
Источник

Вам нужно будет отслеживать "текущий" URL / состояние программы и сравнивать его с тем, что вы получаете change() выяснить, какие действия необходимо выполнить дальше.

Источник
Другие вопросы по тегам