是重新呈现整个模板更好，还是使用jquery修改一些值更好

Would it be better to render a whole template again or use jquery to modify a few values?

本文关键字：更好 jquery 修改 新呈现      更新时间：2023-09-26

让我们以以下模板为例：

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

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

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

但作为一个普遍的答案，我认为你必须回顾以下几点：

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

有关更多详细信息，请查看以下链接：

  • http://ianstormtaylor.com/break-apart-your-backbonejs-render-methods/
  • http://ianstormtaylor.com/assigning-backbone-subviews-made-even-cleaner/
  • http://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple/

我更喜欢通过JQuery进行更新。JQuery的小更新即使在600 MHz的安卓系统上也相当快。

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

相关文章：