将数据绑定到DOM的示例

Question

我在Backbone.js页面中阅读了以下内容:

在处理涉及大量JavaScript的Web应用程序时,您学习的第一件事就是停止将数据绑定到DOM.创建最终成为混乱的jQuery选择器和回调的JavaScript应用程序非常容易,所有这些都疯狂地尝试在HTML UI,JavaScript逻辑和服务器上的数据库之间保持数据同步.对于富客户端应用程序,更有条理的方法通常很有帮助.

我不确定我是否完全理解上面的段落(我不确定我是否完全理解使用Backbone.js的必要性).

任何人都可以给我一个将数据绑定到DOM以及Backbone.js如何解决它的示例？

编辑:

这是一个例子吗？

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

(etc...)

(这是我用过的黑客,因为我不知道怎么用ph​​p做).

因此,如果我修改ID #searchbox或移动其位置,代码将无法再次运行.这是上面的段落所指的是什么？

Answer 1

我刚刚使用主干做了一些事情，显示了一个模式编辑框，您可以在其中编辑项目的名称。由于该名称也显示在主页上，因此我想同时更新它。但我不想识别 DOM 元素并直接使用编辑结果更新它。相反，我创建了一个骨干模型：

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

然后，我监听新模型的任何更改，在本例中为 project_name 属性：

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

然后我使用“newModel”创建一个新视图

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

然后显示出来，如果模式视图中的名称发生更改，则会在“父”视图中触发“this.updateName”函数，因此无需识别实际 DOM 元素的位置。

整个“父”函数如下所示：

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

    });

显然我必须在某个地方更新 DOM，但现在它与编辑解耦并且更易于管理。