呈现多个模板

Question

我正在学习 Backbone 和 Underscore，我正在制作一个模拟电子邮件应用程序。

我设法将一个 JSON 电子邮件集合传递到我的视图，并将其显示在无序列表中。我想要的是单击一个项目并在我的列表旁边呈现一个单独的模板，显示电子邮件的内容。

我认为的代码片段：

html 模板：

<div>
    <h1>Backbone test data bind to view</h1>
    <hr/>
    <div class="page">
    </div>
    <div class="content">
    </div>
</div>

<script type="text/template" id="email-list-template-styled">       
<div class="tab">
    <ul>
        <@ _.each(emails, function(email){ @>
            <a class="tablinks" data-id="<@= email.get('id') @>" href="backbone" >
                <td> From: <@= email.get('sender') @> </td> </br>
                <td> To: <@= email.get('recipient') @> </td> </br>
                <td> Date: <@= email.get('dateSent') @> </td> </br>
            </a>
        <@ }) @>
    </ul>
</div>
</script>

<script type="text/template" id="email-content">
    <div id="emailContent" class="tabcontent">
        <h3>From: sender</h3>
        <h3>To: recipient</h3>
        <h3>Subject: subject</h3>
        <h3>Date: dateSent</h3>
        <p>message</p>
    </div>
</script>

Java 脚本：

<script type="text/javascript">
var EmailsList = Backbone.Collection.extend({
    url : 'backbone/getEmails.html'
});

var Email = Backbone.Model.extend({});

var EmailList = Backbone.View.extend({
    el: '.page',
    events: {
         'click' : 'showAlert'

        },
        showAlert: function(e){
            e.preventDefault();
            var that = this;
            var id = $(event.target).data('id');
            var Email = Backbone.Model.extend({
                url: 'backbone/getEmail/' + id
            });

            var email = new Email();
            email.fetch({
                success: function(email){
                    console.log(email.toJSON());
                    var template = _.template($('#email-content').html(), {email: email.models} );
                    that.$el.append(template);
                }
            })
        },

    render: function(){
        var that = this;
        var emails = new EmailsList();
        emails.fetch({
            success : function(emails) {
                console.log(emails.toJSON());
                var template = _.template($('#email-list-template-styled').html(), {emails: emails.models} );
                that.$el.html(template);
            }
        })
    }
});

var emailList = new EmailList();

var Router = Backbone.Router.extend({
    routes:{
        '': 'backbone'
    }
})

var router = new Router();
router.on('route:backbone', function(){
    emailList.render();
});

Backbone.history.start();
</script>

单个对象数据示例：

dateSent:"2017-03-21 08:36"
id:3
message:"Message3"
recipient:"Recipient3"
sender:"Sender3"
subject:"Subject3"

到目前为止，我已经设法获得了我正在点击的电子邮件的 id 到点击事件。比起我尝试呈现一个传递单个电子邮件对象的模板（我收到了正确的电子邮件 JSON），我附加了模板，所以目前它创建了多个实例，我似乎无法在 email-content模板。我收到一个错误：Uncaught TypeError: Cannot read property 'get' of undefined 当我输入如下内容时：

<h3>From: sender <@= email.get('sender') @></h3>

所以问题是：

如何重新呈现内容模板

如何访问内容模板中的电子邮件变量？

Answer 1

您的代码使用的是旧的 underscore.js 版本语法，如果您使用的是新版本，那就是个问题，请使用新语法：

var template = _.template(templateString);
template(data);

并在下一行中：

var template = _.template($('#email-content').html(), {email: email.models} );

电子邮件是模型，不是集合。

所以你的代码应该是：

var template = _.template($('#email-content').html(), {email: email} );

现在您可以<h3>From: sender <@= email.get('sender') @></h3>。

我建议这样做：

var template = _.template($('#email-content').html(), {email: email.toJSON()} );

并像 <h3>From: sender <@= email.sender @></h3> 那样渲染只是为了确保模板内容不会影响原始模态。

此外，您不应在事件处理程序中定义模态构造函数

var Email = Backbone.Model.extend({
   url: 'backbone/getEmail/' + id
});

而是像

那样定义您的模型

var Email = Backbone.Model.extend({
   urlRoot: 'backbone/getEmail/'
});

并在模型上设置 id。 Backbone 会将 id 附加到 url。

如果您将 {model: Email} 传递给集合，则无需设置 urlRoot，并且使用它的 get() 方法从集合中找到匹配的模型，而不是每次都创建新的模型实例，在我看来，这是正确的做法。

其他建议：

为电子邮件的详细视图定义一个单独的视图
如果您是 Backbone

el

升级到 underscore.js 的新版本并在视图的 template 中缓存模板函数属性
使事件侦听器 'click' : 'showAlert' 更具体，如 'click .email' : 'showAlert'。否则单击视图中的任意位置将触发处理程序。如果用户点击的元素不是包含数据 id 的实际电子邮件（例如下拉列表或其他内容），则会导致错误

呈现多个模板

rendering multiple templates

javascript

spring-mvc

backbone.js

underscore.js