javascript - 渲染多个模板

Question

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

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

我认为的代码片段:

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在模型上。主干将附加 id至url .

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

其他建议:

• 为电子邮件的详细 View 定义单独的 View
• 避免使用 el属性(如果您是 Backbone 新手)
• 升级到新版本underscore.js并将模板函数缓存在 View 的template中属性(property)
• 创建事件监听器 'click' : 'showAlert'更具体如 'click .email' : 'showAlert' 。否则，单击 View 中的任意位置将触发处理程序。如果用户单击的元素不是包含数据的实际电子邮件 id (比如下拉菜单之类的)它会导致错误