How to know if element is already in the DOM when

Question

here's the situation: When page is opened for the first time, it already has prepared DOM by server(php).

If user has javascript turned on, then i want to convert my page to web app(or whatever you call it). As soon as Javascript is initialized, Backbone fetches collection from server. The problem is, that some of these fetched items are already on page.

Now how can i mark those items which already are in the DOM? And how can i tie them up with the Backbone view?

Answer 1

Ok, i managed to do that like so:

var Collection = Backbone.Collection.extend({...});
var ItemView = Backbone.View.extend({...});

var ItemsView = Backbone.View.extend({
  initialize: function () {
    var that = this,
        coll = new Collection;

    coll.fetch({ success: function () {
      that.collection = coll;
      that.render();
    }});
  },
  render: function () {
    this.collection.each(this.addOne, this);
  },
  addOne: function (model) {

    var selector = '#i'+model.get("id");

    if( $(selector).length ) {
      //If we are here, then element is already in the DOM
      var itemView = new ItemView({ 'model': model, 'el': selector, 'existsInDom': true });
    } else {
      var itemView = new ItemView({ 'model':model });
    }
  }
});

Answer 2

Hooking up a Backbone.View to an existing DOM element is simple:

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

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

The view now handles the #foo element's events, and all the other View goodness. You shouldn't call view.render. If you do, it will re-render the view to the element. This means that you can't define any necessary code in the render method.

As to how to find out which elements are already in the DOM, and how to find the corresponding element for each view - that's a bit more complicated to answer without knowing exactly how your data and html looks like. As a general advice, consider using data-* attributes to match up the elements.

Let's say you have a DOM tree:

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

You could bind/render a model to the container like so:

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