在创建新的Backbone视图时如何知道元素是否已经存在于DOM中

Question

这是情况:当页面第一次打开时,它已经通过服务器(php)准备了DOM.

如果用户打开了javascript,那么我想将我的页面转换为网络应用程序(或任何你称之为).初始化Javascript后,Backbone从服务器获取集合.问题是,这些获取的项目中的一些已经在页面上.

现在我如何标记已经在DOM中的项目？我怎样才能将它们与Backbone视图联系起来？

Answer 1

将Backbone.View连接到现有DOM元素很简单:

//get a referent to the view element
var $el = $("#foo");

//initialize new view
var view = new FooView({el:$el});

视图现在处理#foo元素的事件以及所有其他View优点.你不应该打电话view.render.如果这样做,它将重新渲染视图到元素.这意味着您无法在render方法中定义任何必要的代码.

至于如何找出DOM中已经存在哪些元素,以及如何为每个视图找到相应的元素 - 在不确切知道数据和html的样子的情况下回答有点复杂.作为一般建议,请考虑使用data-*属性来匹配元素.

假设你有一个DOM树:

<ul id="list">
  <li data-id="1">...</li>
  <li data-id="2">...</li>
  <li data-id="5">...</li>
</ul>

您可以将模型绑定/渲染到容器,如下所示:

var view;

//container element
var $list = $("ul#list");

//find item node by "data-id" attribute
var $item = $list.find("li[data-id='" + model.id+ "']");

if($item.length) {
  //element was in the DOM, so bind to it
  view = new View( {el:$item, model:model} );
} else {
  //not in DOM, so create it
  view = new View( {model:model} ).render();
  $list.append(view.el);
}