1

たとえば、次のテンプレートを見てみましょう。

<div class="picture">
    <img src="<%= model.get("url") %>"></img>
    <p class="author"><%= model.get("author") %></p>
    <p class="date"><%= model.get("date") %></p>
    <div class="likers"><%= some logic that outputs a nice list of people that have liked this picture %></div>
    <button class="like-button <%= model.get("is_liked") ? 'active' : '' %>"><%= model.get("is_liked") ? 'You liked this picture' : 'Click here to like this picture' %></button>
</div>

バックボーンを使用してそのテンプレートをレンダリングし、「いいね」ボタンをクリックすると、次の関数がトリガーされるとします。

オプションA：

var me = "Peeter";
var model; //refrence to the model 

var likers = model.get("likers");

model.get("is_liked") ? likers.remove(me) : likers.add(me); //Add/remove me
model.set({
    "is_liked" : !model.get("is_liked"), //Toggle state
    likers : likers
}); 

var $button = $(".like-button")
var $likers = $(".likers");

$button.toggleClass("active");
$button.hasClass("active") ? $button.text('You liked this picture') ? $button.text('Click here to like this picture');

$likers.text(/* copy/paste the logic that's in the  template to render the list of likers*/);

オプションB：

var me = "Peeter";
var model; //refrence to the model 
var template; //refrence to the template declared at the top of this question

var likers = model.get("likers");

model.get("is_liked") ? likers.remove(me) : likers.add(me); //Add/remove me
model.set({
    "is_liked" : !model.get("is_liked"), //Toggle state
    likers : likers
}); 

template.render();

どの方法をお勧めしますか？なんで？また、モバイルブラウザを考慮に入れてください。テンプレート全体の再レンダリング（テンプレートが少し大きかった場合）は、モバイルデバイスで少し遅すぎますか？

4

3 に答える 3

1

これは一般的に答えることができない質問であり、特定のユースケースのプロファイリングが確かに役立ちます。

しかし、一般的な答えとして、次の点を確認する必要があると思います。

  1. テンプレートのサイズと、データでテンプレートを処理するための結果の時間
  2. ビューにバインドするイベントの数。再レンダリングするたびに、バインドおよびバインド解除する必要があります。
  3. レンダリング機能とそれをどのように設定したかが重要な影響を及ぼします。

詳細については、次のリンクを確認してください。

于 2012-08-30T16:07:35.637 に答える
0

JQueryを介した更新を希望します。JQueryの小さな更新は、600MHzandroidでもかなり高速です。

于 2012-08-30T16:04:00.107 に答える
0

Backbone ModelBinderを使用して、UI要素をモデルにバインドしてみることができます。テンプレート全体を再レンダリングせずに、小さなUIセクションを更新するのが最善の方法です。

于 2012-08-30T17:53:24.043 に答える