1

我正在学习如何在我正在处理的项目中使用 Backbone，并且对在 Backbone 中解耦视图和模板时的最佳实践有疑问。特别是动态生成的View.el和View.$el.

在文档中它说 View.elis created from the view's tagName, className, id and attributes properties, if specified. If not, el is an empty div.

问题一：

在设置视图的属性、id 和 className 时，这是否不会高度耦合视图和模板文件，以至于如果设计人员想要调整模板，他们将需要访问视图？

例如，我有一个 jQuery Mobile 列表，其中的属性和类名决定了列表的外观：

<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c"
class="ui-btn ui-li ui-li-has-thumb ui-btn-up-c"></li>

如果我使用 Backbone 视图的 tagName、attributes 和 className 属性，那么所有这些都将存储在视图文件中而不是模板中。这不是一个坏习惯还是我错过了什么？

问题2

为了避免上述情况，我是：

A. 根本不使用View.el或相关的属性（tagName、attributes 等），而是直接将其放在模板文件中。

B.通过调用我的 render() 函数来编译我的模板underscore.template()并将其注入到属性中：View.$el

View.$el.html(_.template(template, data))

当它是根视图时，将目标 id 传递给 View 构造函数并在我的渲染函数调用中：

$(this.target).append(View.$el.html());

或者，如果它是一个调用另一个视图的视图：

$("#target_id").append(view.render.$el.html());

这是一个好的方法/实践还是我应该使用其他一些最佳实践？

4

3 回答 3

0

据我了解，模板可以由设计师更改。您只需将模板注入到您的主干视图中，例如在初始化时通过其 ID 调用模板。然后，通过将视图插入到由“el”标识的父容器中来呈现视图，该容器可能是类或 id。

要更改视图的样式，您只需更改模板。视图的逻辑和它的外观被这种方法分开。

<script id="templ" type="text/html">
    <li class="fancy-styling">A designer made me.</li>
</script>

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript">
    (function ($) {
        var myView = Backbone.View.extend({

                initialize: function (options) {
                    this.template = options.template;
                },

                render: function () {
                    var compiled = _.template(this.template);
                    this.$el.html(compiled({}));
                    return this;
                }

            }),
            view = new myView({
                el: $('#links'),
                template: $('#templ').html()
            });

        view.render();
    })(jQuery);
</script>

于 2013-08-08T11:01:56.327 回答
0

所有属性都可以描述为这样的函数，因此您可以在呈现之前对其进行操作：

var MyView = Backbone.View.extend({
    className: function() {
        return this.options.dynamicClassName + ' always-here';
    },
    id: function() {
        return this.options.dynamicId;
    },
    tagName: function() {
        return this.options.dynamicTagName;
    },
    render: function() {
        return this;
    }
});

var myView = new MyView({
    dynamicClassName: 'test',
    dynamicTagName: 'li',
    dynamicTd: 'blah'
});

你也可以直接传入你想要的，而不用在 View 中定义它：

var myView = var myView = new MyView({
    className: 'test',
    tagName: 'li',
    id: 'blah'
});
于 2013-08-08T14:24:05.523 回答
0

1) el不是真正用于您的模板（即不是在渲染之前），而是用于将您的视图与DOM. 您可以通过selector指定el何时定义视图将 a 传递给您的视图

var MyAwesomeView = Backbone.View.extend({
    el: '#some_node',
    ...
});

或者当你实例化你的视图时

var myView = new MyAwesomeView({
  el: '#some_other_node',
  ...
});

您也可以$像在@bentrm 答案中一样传递选择器，两者都会给您几乎相同的结果。

您也可以不指定任何selector，而只指定tagName,className或id。看看这个源代码片段：https ://github.com/jashkenas/backbone/blob/master/backbone.js#L1092-L1106

对于您的示例，您可以将其li作为模板，而不是将您的视图附加到 ali您可以将其附加到您的ul或ol

2） 我想我已经解释了 A。至于 B，看看这个很棒的演示文稿：http ://amy.palamounta.in/2013/04/12/unsuck-your-backbone/

于 2013-08-08T15:24:48.110 回答