Смешанный нокаут и визуализация на стороне сервера

У меня есть несколько страниц, которые мне нужно сделать с помощью серверной части, чтобы сделать их дружественными к поисковым системам. Для поисковых систем он должен функционировать как классический веб-сайт. Для пользователей я хочу сделать интерфейс более интерактивным. Моя мысль состоит в том, чтобы отобразить сервер страницы, а затем использовать нокаут и jquery для получения данных снова через ajax и привязать его к странице.

Меня беспокоит наличие вспышек без контента или дублированного контента. Есть ли лучшая практика/шаблон для таких случаев?

Процесс будет выглядеть следующим образом:

  • Отобразить страницу с использованием серверной части, включая длинный список элементов html.
  • Используйте jQuery для получения тех же данных, которые уже были отображены на странице.
  • Очистить содержимое на стороне сервера с помощью jquery.
  • Привязать ajax к шаблону нокаута, который фактически отображает страницу так, как она была ранее.
  • Последующие щелчки на странице с помощью обычного пользователя используют ajax и нокаут для визуализации данных.
  • Поисковая система может следовать стандартным ссылкам, чтобы увидеть те же данные, что и пользователь.

Часть, на которую я повесил трубку, - это предварительная визуализация, очистка и повторная рендеринг с помощью knockout/jquery.

Может быть, мой мыслительный процесс немного, я бы хотел услышать отзывы.

Ответы

Ответ 1

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

вот образец для простой формы:

Часть MVC:

public ActionResult Index()
{
    Person newPerson = new Person()
    {
        FirstName = "John",
        LastName = "Smith"
    };

    return View(newPerson);
}

И ваш вид:

<div id="main">
    <div>
        First Name:
        @Html.TextBoxFor(p => p.FirstName, new { data-bind = "value: firstName" })
    </div>
    <div>
        Last Name:
        @Html.TextBoxFor(p => p.LastName, new { data-bind = "value: lastName"})
    </div>

    <input type="button" data-bind="click: showValues" value="Show" />
</div>

И, наконец, ваша нокаут-часть:

var personViewModel = function () {

    var self = this;

    self.firstName = ko.observable($("#FirstName").val());
    self.lastName = ko.observable($("#LastName").val());

    self.showValues = function () {
        alert(self.firstName() + " " + self.lastName());
    }
};

ko.applyBindings(new personViewModel());

Надеюсь, что это сработает для вашего дела.

EDIT: Фиксация опечатки data_bind для привязки данных

Ответ 2

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

https://www.npmjs.com/package/knockout-pre-rendered

Вы также можете рассмотреть возможность использования React, который является "универсальным" - вы можете отображать страницу на сервере и на клиенте с тем же кодом. Поскольку React использует diff-engine, не будет мигать, когда сервер, обработанный содержимым, будет заменен содержимым, переданным клиентом.

http://facebook.github.io/react/

http://reactjs.net/

Ответ 4

Также можно использовать привязку peTemplate. Для привязки tempate и foreach он не регенерирует HTML, а вместо него использует сгенерированный HTML-код на стороне сервера. Единственное, что вам нужно сделать, это аннотирование HTML на сервере несколькими атрибутами, которые определяют ключ данных.