1

我正在尝试通过几个文档阅读 Backbonejs。它是客户端的 MVC 框架。在视图中，我们编译模板并渲染它们（将它们附加到 DOM，或进行一些操作）。Backbone 有一个下划线 js 的依赖，这是模板的东西。

使用 Bbone，当操作视图时，el图像就出现了。我的理解el是它引用了DOM Object. 如果没有为其分配 dom 对象，则它假定为空 div。

var choose_view = new SearchView({ el: $("#choose_me") });

所以在上面的例子中，id为choose_me的div会在调用choose_view时被操作。到目前为止一切都很好，但是按时间顺序发生的事情是什么，我无法得到，还有任何冗余，请阅读查询评论：

// the div with id search_container will be picked up by el
<div id="search_container"></div>

<script type="text/javascript">
    SearchView = Backbone.View.extend({
        initialize: function(){
            this.render();
        },
        render: function(){
            //1. Compile the template using underscore, QUESTION: **what does this mean**?
            var template = _.template( $("#search_template").html(), {} );
            //2. Load the compiled HTML into the Backbone "el"
            this.el.html( template );
        }
    });
    // QUESTION: **When in 2. we have already mentioned, el, can we not over there
    provide the div element?**
    var search_view = new SearchView({ el: $("#search_container") });
</script>

<script type="text/template" id="search_template">
    <label>Search</label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>
4

1 回答 1

1

问题 1

编译模板意味着您获得一个模板函数，您可以将数据对象作为模板函数的参数传入。这样，您可以使用不同的数据对象多次评估模板函数，而它只编译一次。

compiledTemplate = _.template( $("#search_template").html());
this.el.html(compiledTemplate(data));
another.el.html(compiledTemplate(otherData));

在上面的示例中，您编译模板一次，然后使用它两次。在您提供的代码中，您同时编译和使用您的模板

所以

_.template( $("#search_template").html()); // Create a template function, the result is a function that you can call with a data object as argument
_.template( $("#search_template").html(), data); // Create a template function and call it directly with the data object provided, the result is a string containing html

参考：http ://underscorejs.org/#template

问题2

您可以直接提供 div 元素，但 el 是一个帮助器，用于检索将委托所有 DOM 事件的视图的根元素。

如主干文档中所示

如果您想创建一个引用 DOM 中已有元素的视图，请将元素作为选项传入：new View({el: existingElement})

参考：http ://backbonejs.org/#View-el

于 2012-10-11T13:04:49.383 回答