11

検索エンジンに適したものにするために、サーバー側でレンダリングする必要があるページがいくつかあります。検索エンジンにとっては、従来の Web サイトとして機能する必要があります。ユーザーにとっては、インターフェイスをよりインタラクティブにしたいと考えています。私の考えは、ページサーバー側をレンダリングしてから、ノックアウトとjqueryを使用してajax経由でデータを再度取得し、ページにバインドすることです。

コンテンツのないフラッシュやコンテンツの重複が気になります。このような場合のベストプラクティス/パターンはありますか?

プロセスは次のようになります。

  1. html 要素の長いリストを含む、サーバー側を使用してページをレンダリングします。
  2. jQuery を使用して、既にページにレンダリングされている同じデータをフェッチします。
  3. jquery を使用してサーバー側のコンテンツをクリアします。
  4. ajax をノックアウト テンプレートにバインドします。これにより、以前と同じようにページが効果的にレンダリングされます。
  5. 通常のユーザーがデータをページングするための後続のクリックでは、ajax とノックアウトを使用してデータをレンダリングします。
  6. 検索エンジンは標準のリンクをたどって、ユーザーと同じデータを表示できます。

私が夢中になっている部分は、ノックアウト/jquery を使用してプリレンダリング、クリア、および再レンダリングする方法です。

私の思考プロセスが少しずれているかもしれませんが、フィードバックをお待ちしております。

4

5 に答える 5

8

基本的にサーバー側からデータを入力しますが、ノックアウト部分から「データバインド」属性を入力に追加し、フィールド値を取得してオブザーバブルを設定します。

簡単なフォームのサンプルを次に示します。

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());

あなたのケースでうまくいくことを願っています。

編集: data_bind のタイプミスを data-bind に修正

于 2013-06-28T12:01:32.017 に答える
1

ノードとドミノのような単純な DOM 実装を使用して、ノックアウトをレンダリングできます。

于 2017-04-28T14:34:14.643 に答える
0

これはノックアウトに加えてデュランダルを使用しますが、同じ問題があり、これが私が思いついた解決策でした:

https://github.com/bestguy/durandal-delayed-composition

于 2014-01-04T07:07:42.550 に答える