javascript - 再次渲染整个模板或使用jquery修改一些值会更好吗？

Question

让我们以下面的模板为例：

<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>

假设我使用 Backbone 渲染该模板并单击like-button触发以下功能：

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

您会推荐哪种方法？为什么？另外请考虑移动浏览器，在移动设备上重新渲染整个模板（如果模板有点大）是否太慢了？

score 1 · Accepted Answer

这是一个一般无法回答的问题，针对您的特定用例进行一些分析肯定会有所帮助。

但作为一般性答案，我认为您必须回顾以下几点：

模板的大小以及使用数据处理它的时间
绑定到视图的事件数。越多，每次重新渲染时需要绑定和解除绑定的次数就越多
您的渲染功能以及您如何将其设置为重大影响。

更多详情，请查看以下链接：

score 0 · Accepted Answer

我更喜欢通过 JQuery 进行更新。即使在 600 MHz 的 Android 上，JQuery 的小更新也相当快。

score 0 · Accepted Answer

您可以尝试使用Backbone ModelBinder将您的 UI 元素绑定到您的模型。在不重新渲染整个模板的情况下更新小的 UI 部分是最好的等待。

javascript - 再次渲染整个模板或使用jquery修改一些值会更好吗？

3 回答 3

Related

Reference