渲染多个模板

Question

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

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

我认为的代码 sn-p：

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>

所以问题是：

如何重新渲染内容模板

如何访问内容模板中的 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。 Backbone 会将id 附加到url。

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

其他建议：

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