Question

我在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...)

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

因此，如果我修改#searchbox的ID或移动其位置，代码将无法再次运行。那是上面的段落所指的那个吗？

Answer 1

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

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

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

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

然后我使用＆＃39; newModel＆＃39;创建一个新视图。

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

然后显示，如果名称在模态视图中更改，则＆＃39; this.updateName＆＃39;功能在“父母”中被触发。查看，因此删除任何需要识别实际DOM元素的位置。

整个父母＆＃39;功能看起来像这样：

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

将数据绑定到DOM的示例

1 个答案: