将数据绑定到 DOM 的示例答案

【问题标题】：Example of tying data to the DOM将数据绑定到 DOM 的示例
【发布时间】：2012-10-19 15:43:19
【问题描述】：

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

在开发涉及大量 JavaScript 的 Web 应用程序时，你学到的第一件事就是停止将你的数据与 DOM。创建最终的 JavaScript 应用程序太容易了就像一堆纠结的 jQuery 选择器和回调一样，都在尝试疯狂地保持 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...)

（这是我使用的 hack，因为我不知道如何使用 php）。

所以如果我修改#searchbox 的ID 或移动它的位置，代码将无法再次运行。上面这段话是指这个吗？

【问题讨论】：

你看过这个吗：stackoverflow.com/questions/9715295/backbone-js-and-jquery/…
一个更好的例子是，如果您在单个页面上的多个位置显示某人的头像。有人改变他们的头像会发生什么？使用 Backbone（或类似工具），每个人都会收到 'change' 事件并重绘自己，如果没有 Backbone，您将无法确保每个人都手动更新；手工操作往往会导致一大堆相互关联的困惑和挫败感。此示例背后的基本用例是同时在多个（可能数量不同）位置显示相同的信息。

标签： javascript dom backbone.js

【解决方案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，但现在它与编辑分离并且更易于管理。

【讨论】：