Ответ 1

Я считаю, что Sammy.js(http://sammyjs.org) (MIT-лицензия) лучше всего фокусируется на том, что вы хотите сделать, с его 2 основных столпа:

• Маршруты
• События

Я могу процитировать из документов, но это довольно просто:

• настроить клиентские маршруты, которые относятся к материалам, которые необходимо выполнить, например: обновить представление через ajax

• связывать события для вызова маршрутов, например: вызывать маршрут выше, когда я нажимаю ссылку. (Вы должны убедиться, что e.preventDefault вызывается в определенном событии, которое, как я полагаю, так как это приложение действительно, так что его нельзя отвлечь на любую библиотеку, которую вы собираетесь использовать imho)

Некоторые соответствующие документы

• http://sammyjs.org/docs
• http://sammyjs.org/docs/routes
• http://sammyjs.org/docs/events

Пример для маршрута: (из http://sammyjs.org/docs/tutorials/json_store_1)

 this.get('#/', function(context) {
    $.ajax({
      url: 'data/items.json',
      dataType: 'json',
      success: function(items) {
        $.each(items, function(i, item) {
          context.log(item.title, '-', item.artist);
        });
      }
    });
  });

Или что-то вроде

 this.get('#/', function(context) {
     context.app.swap(''); ///the 'swap' here indicates a cleaning of the view
                              //before partials are loaded, effectively rerendering the entire screen. NOt doing the swap enables you to do infinite-scrolling / appending style, etc. 
     // ...
   });

Конечно, другие клиентские MVC-рамки также могут быть вариантом, которые убирают еще больше сантехники, но в этой ситуации могут быть излишними.

довольно хорошее (и все еще довольно недавнее) сравнение:

http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/ (Я сам использую Spine.js).

Наконец, я подумал, что было бы полезно включить ответ, который я написал некоторое время назад, который подробно описывает всю лучшую практику (как я ее вижу) в обновлении на стороне клиента и т.д. Возможно, вы ее найдете полезно:

Доступность и все эти рамки JavaScript

Ответ 2

В настоящее время я использую PathJS в одном из моих приложений. Это было лучшее решение, которое я сделал. Для вашего конкретного использования см. Пример HTML5.

Часть кода, которая делает этот пример работы (из источника):

<script type="text/javascript">
        // This example makes use of the jQuery library.

        // You can use any methods as actions in PathJS.  You can define them as I do below,
        // assign them to variables, or use anonymous functions.  The choice is yours.
        function notFound(){
            $("#output .content").html("404 Not Found");
            $("#output .content").addClass("error");
        }

        function setPageBackground(){
            $("#output .content").removeClass("error");
        }        

        // Here we define our routes.  You'll notice that I only define three routes, even
        // though there are four links.  Each route has an action assigned to it (via the 
        // `to` method, as well as an `enter` method.  The `enter` method is called before
        // the route is performed, which allows you to do any setup you need (changes classes,
        // performing AJAX calls, adding animations, etc.
        Path.map("/users").to(function(){
            $("#output .content").html("Users");
        }).enter(setPageBackground);

       Path.map("/about").to(function(){
            $("#output .content").html("About");
        }).enter(setPageBackground);

       Path.map("/contact").to(function(){
            $("#output .content").html("Contact");
        }).enter(setPageBackground);

        // The `Path.rescue()` method takes a function as an argument, and will be called when
        // a route is activated that you have not yet defined an action for.  On this example
        // page, you'll notice there is no defined route for the "Unicorns!?" link.  Since no
        // route is defined, it calls this method instead.
        Path.rescue(notFound);

        $(document).ready(function(){
            // This line is used to start the HTML5 PathJS listener.  This will modify the
            // `window.onpopstate` method accordingly, check that HTML5 is supported, and
            // fall back to hashtags if you tell it to.  Calling it with no arguments will
            // cause it to do nothing if HTML5 is not supported
            Path.history.listen();

            // If you would like it to gracefully fallback to Hashtags in the event that HTML5
            // isn't supported, just pass `true` into the method.

            // Path.history.listen(true);

            $("a").click(function(event){
                event.preventDefault();

                // To make use of the HTML5 History API, you need to tell your click events to
                // add to the history stack by calling the `Path.history.pushState` method. This
                // method is analogous to the regular `window.history.pushState` method, but
                // wraps calls to it around the PathJS dispatched.  Conveniently, you'll still have
                // access to any state data you assign to it as if you had manually set it via
                // the standard methods.
                Path.history.pushState({}, "", $(this).attr("href"));
            });
        });
    </script>

PathJS имеет некоторые из наиболее востребованных функций библиотеки маршрутизации:

• Легкий вес
• Поддерживает API истории HTML5, метод onhashchange и грациозную деградации
• Поддерживает корневые маршруты, методы спасения, параметризованные маршруты, дополнительные компоненты маршрута (динамические маршруты) и аспектно ориентированное программирование.
• Хорошо протестировано (тесты доступны в каталоге. /tests )
• Совместимость со всеми основными браузерами (протестировано на Firefox 3.6, Firefox 4.0, Firefox 5.0, Chrome 9, Opera 11, IE7, IE8, IE9).
• Независимо от всех сторонних библиотек, но отлично играет со всеми из них.

Я нашел последние слишком привлекательные моменты. Вы можете найти их здесь

Надеюсь, вы сочтете это полезным.

Ответ 3

Я хотел бы предложить комбинацию

crossroads.js как маршрутизатор http://millermedeiros.github.com/crossroads.js/

и хешер для обработки истории браузера и хеш-ссылок (без дополнительных решений): https://github.com/millermedeiros/hasher/ (на основе http://millermedeiros.github.com/js-signals/)

Это все равно потребует несколько строк кода (для загрузки содержимого ajax и т.д.), но при обработке маршрута вы можете загружать и загружать другие возможности.

Вот пример использования jQuery (ни одна из вышеперечисленных библиотек не требует jQuery, я просто ленив...)

http://fiddle.jshell.net/Fe5Kz/2/show/light

HTML

<ul id="menu">
    <li>
        <a href="foo">foo</a>            
    </li>
    <li>
        <a href="bar/baz">bar/baz</a>
    </li>
</ul>

<div id="content"></div>

JS

//register routes
crossroads.addRoute('foo', function() {
    $('#content').html('this could be ajax loaded content or whatever');
});

crossroads.addRoute('bar/{baz}', function(baz) {

    //maybe do something with the parameter ...
    //$('#content').load('ajax_url?baz='+baz, function(){
    //    $('#content').html('bar route called with parameter ' + baz);
    //});

    $('#content').html('bar route called with parameter ' + baz);
});


//setup hash handling
function parseHash(newHash, oldHash) {
    crossroads.parse(newHash);
}
hasher.initialized.add(parseHash);
hasher.changed.add(parseHash);
hasher.init();


//add click listener to menu items
$('#menu li a').on('click', function(e) {
    e.preventDefault();
    $('#menu a').removeClass('active');
    $(this).addClass('active');

    hasher.setHash($(this).attr('href'));
});​

Ответ 4

Вы просмотрели образец SPAS (одностраничное приложение) BigShelf от Microsoft? Похоже, он охватывает, как достичь большей части того, что вы просите.

Он использует объект History.js, настраиваемый объект-обертку, который легко управляет навигацией под названием NavHistory и Knockout.js для обработки кликов.

Здесь представлен чрезвычайно сокращенный рабочий процесс, как это работает: сначала вам нужно инициализировать объект NavHistory, который обертывает history.js и регистрирует обратный вызов, который выполняется при наличии состояния push или хэша:

var nav = new NavHistory({
    params: { page: 1, filter: "all", ... etc ... },
    onNavigate: function (navEntry) {
        // Respond to the incoming sort/page/filter parameters
        // by updating booksDataSource and re-querying the server
    }
});

Далее вы определите одну или несколько моделей просмотра Knockout.js с командами, которые могут быть привязаны к кнопкам ссылок и т.д.:

var ViewModel = function (nav) {
  this.search = function () {
    nav.navigate({ page: 2, filter: '', ... }); // JSON object matching the NavHistory params
  };
}

Наконец, в вашей разметке вы будете использовать Knockout.js для привязки ваших команд к различным элементам:

<a data-bind="click: search">...</a>

Связанные ресурсы гораздо более подробно объясняют, как все это работает. К сожалению, это не единый фреймворк, как вы ищете, но вы будете удивлены, насколько легко заставить это работать.

Еще одна вещь, следуя примеру BigShelf, сайт, который я создаю, полностью совместим с кросс-браузером, IE6 +, Firefox, Safari (мобильный и рабочий стол) и Chrome (мобильный и рабочий).

Ответ 5

Несколько советов

• ExtJs, см. их Пример истории, и здесь документы.
• Менеджер истории браузера YUI.
• jQuery BBQ, кажется, обеспечивает более продвинутый набор функций над jQuery.hashcode.
• ReallySimpleHistory также может помочь, хотя он довольно старый и, возможно, устаревший.

Примечание. История ExtJs была расширенной для оптимизации дублированных (избыточных) вызовов до add(). p >

Ответ 6

AjaxTCR Library, похоже, охватывает все базы и содержит надежные методы, которые я раньше не видел. Он выпущен под лицензией BSD (инициатива с открытым исходным кодом).

Например, здесь представлены пять методов AjaxTCR.history();:

init (onStateChangeCallback, initState);

addToHistory (id, data, title, url, options);

GETALL();

GetPosition();

enableBackGuard (сообщение, немедленное);

Вышеупомянутый addToHistory(); имеет достаточно параметров, чтобы обеспечить глубокую хэш-привязку на веб-сайтах.

Больше глазной конфеты .com.cookie(), .storage() и .template() обеспечивает более чем достаточно методы для обработки любых данных сеанса.

Хорошо документированная веб-страница API AjaxTCR содержит множество информации с загружаемым документом для загрузки!

Обновление статуса:
На этом веб-сайте также есть Примеры веб-страницы, включая загружаемые .zip файлы с готовностью к использованию Front End (клиент) и Back End (сервер).

Примечательно следующие готовые к использованию примеры:
Одностороннее Cookie
HttpOnly Cookies
Кража истории
История Explorer

Есть еще несколько других примеров, которые завершают процесс использования многих из их методов API, делая любую небольшую обучающую кривую быстрее.

Ответ 7

PJAX - это процесс, который вы описываете.

Более продвинутые методы pjax даже начнут предварительно загружать контент, когда пользователь наводится на ссылку.

Это хорошая библиотека pjax. https://github.com/MoOx/pjax

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

new Pjax({ selectors: ["title", ".my-Header", ".my-Content", ".my-Sidebar"] })

Таким образом, в приведенном выше примере вместо title, .my-header, .my-content и .my-sidebar будут заменены содержимое из вызова ajax.

Что-то нужно искать

Обратите внимание на то, как ваш JS загружается и обнаруживает, когда страница готова. Javascript не будет перезагружать новые страницы. Также обратите внимание, когда вызовы любой аналитики вызываются по той же причине.