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

【问题标题】：Would it be better to render a whole template again or use jquery to modify a few values?再次渲染整个模板或使用jquery修改一些值会更好吗？
【发布时间】：2012-08-30 15:55:08
【问题描述】：

我们以下面的模板为例：

<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 渲染该模板并单击赞按钮触发以下功能：

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

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

【问题讨论】：

我建议您同时尝试并分析它们，看看哪个更好。

标签： javascript android jquery iphone backbone.js

【解决方案1】：

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

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

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

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

【讨论】：

我认为 #2 无效。如果我是正确的（如果我不正确，请随时纠正我），Backbone 只是委托 $el 中的所有事件，这意味着您不会专门在视图元素上绑定任何事件。
阅读第三个链接，你会发现它是有效的，我之前也没有意识到这一点。
我做到了，但我并没有关注这是如何发生的。渲染主视图时重新渲染子视图？
首先，您可以将视图和子视图的渲染以及一个视图的各种元素分开，Ian Taylor 在 3 篇文章中详细演示了将元素插入在一起而不渲染它们。其次，使用“正常”模板渲染，您可以转储当前元素的内容并创建一个新元素 - 因此您要么取消绑定事件，要么最终得到僵尸，然后您需要重新绑定 - 查看“意外解除绑定 DOM 事件”部分第一篇文章。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：