渲染多个模板

Question

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

我设法将Email的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当我输入类似以下内容时， Uncaught TypeError: Cannot read property 'get' of undefined ：

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

因此，问题将是：

如何重新呈现内容模板

如何访问内容模板中的email变量？

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 。 骨干网会将id附加到url 。

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

其他建议：

• 为电子邮件的详细视图定义一个单独的视图
• 如果您不熟悉Backbone，请避免使用el属性
• 升级到underscore.js新版本，并将模板函数缓存在视图的template属性中
• 使事件侦听器'click' : 'showAlert'更具体，例如'click .email' : 'showAlert' 。 否则，单击视图中的任何位置将触发处理程序。 如果用户单击的元素不是具有数据id （例如下拉列表等）的实际电子邮件，则将导致错误