Example of tying data to the DOM

Question

I read the following in Backbone.js' page:

When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. For rich client-side applications, a more structured approach is often helpful.

I'm not sure if I quite understand the passage above (I'm not sure if I quite understand the need to use Backbone.js either).

Can anyone give me an example of tying data to the DOM and how Backbone.js solves it?

EDIT:

Is this an example of it?

jQuery(document).ready(function($) {
  // Header
  jQuery('#header #searchbox').attr('placeholder', '<?php echo pll__("Header Search Field"); ?>');

(etc...)

(Its a hack I used since I didn't know how to do it with php).

So if I modify the ID of #searchbox or move its position, the code won't work again. Is that what the passage above refers to?

Answer 1

I've just done something using backbone that displays a modal edit box, where you can edit the name of a project. As this name is also displayed on the main page I want to update that at the same time. But I don't want to identify the DOM element and update it directly with the result of my edit. Instead I create a backbone model:

this.newModel = new app.Project({model: this.model});

I then listen to the new Model for any changes, in this case for the project_name attribute:

this.listenTo(this.newModel, 'change:project_name', this.updateName);

I then create a new view using the 'newModel'

modal = new app.ProjectModal({
            model: this.newModel,
        });

This is then displayed and if the name changes in the modal view, the 'this.updateName' function is triggered in the 'parent' view, therefore removing any need to identify where the actual DOM element is.

The whole 'parent' function looks like this:

    app.ProjectCardView = Backbone.View.extend({

        tagName: 'article',
        className: 'project',

        template: _.template( $("#tpl-project-card-summary").html() ),

        events: {
            'click .settings-btn': 'showProjectModal'
        },

        initialize: function() {

            //a slightly different model is used to populate project than this card...
            this.newModel = new app.Project({model: this.model});
            return this;
        },

        render: function() {

            this.$el.html( this.template(this.model.toJSON()) );
            return this;
        },

        showProjectModal: function (e) {

            this.listenTo(this.newModel, 'change:project_name', this.updateName);

                this.modal = new app.ProjectModal({
                    model: this.newModel
                });
                return this;

        },

        updateName: function() {

            if (this.modal) {
                this.$el.find('.item_name').text(this.model.get("project_name"));
            }

            return this;
        }

    });

Obviously I have to update the DOM somewhere, but now it is decoupled from the edit and easier to manage.