Question

我正在尝试使用requireJs和requiteJs文本插件在BackboneJs中实现多个模板的每个视图的想法。

这是我的视图代码 - 你可以看到我在我的define（）中传递了两个模板，成功传递了女巫。

define(['Backbone', 'text!Templates/BlogIndex.html', 'text!Templates/Elements/Blog/List.html'], function(Backbone, Template, ElementList){

var BlogPostIndexView = Backbone.View.extend({

    initialize: function () {
        var $template = $(Template);

        $template.prepend(ElementList);

        this.template = _.template($template.html());

    },

    render: function (Template) {
        this.$el.html(this.template({posts : this.collection}));
        return this;
    },

    add: function() {

    }

});

return BlogPostIndexView;  });

您可以看到我正在尝试将第二个模板合并到第一个模板的html中。这很有效，但不幸的是，当我渲染时，我得到了这个....

<div class="outer-wrapper">
<div id="blog-post-wrapper">
    <h1>texting views</h1>
</div>

<ul>
    <% _.each(posts, function(post){ %>
        <li><%= post.title %></li>
    <% }); %>
</ul>

Answer 1

我缺少外包装的结束标记，但是假设它应该在关闭'ul'标记之后，你的模板看起来如下：

container.html

<div class="outer-wrapper">
    <div id="blog-post-wrapper">
        <h1>texting views</h1>
    </div>
</div>

list.html

<ul>
    <% _.each(posts, function(post){ %>
        <li><%= post.title %></li>
    <% }); %>
</ul>

代码：

define([..."container.html", "list.html"...], function (...container, list...) { 
...
initialize: function () {
    // container:
    // no need to compile 'container' if there are no variables..

    // list:
    this.listTemplate = _.template(list);
}
...
render: function () {
    var $container = $(container);
    $container.append(this.listTemplate({...})); 
    this.$el.html($container);
}

顺便说一句：检查一下！文字替代https://github.com/tbranyen/lodash-template-loader

使用requireJs＆amp;和渲染之前组合多个模板。 BackboneJs

1 个答案: