6

我在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 来做）。

因此，如果我修改 ID#searchbox或移动其位置，代码将无法再次工作。上面这段话是指这个吗？

4

1 回答 1

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

于 2013-03-11T21:21:29.660 回答