Javascript 呈现多个模板

我现在正在学习主干线和下划线，我正在制作一个小的模拟电子邮件应用程序

我设法将一个

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> 

到目前为止，我已经设法获得了我正在点击点击事件的电子邮件的id。 我试图呈现一个传递单个电子邮件对象的模板（我得到了正确的电子邮件

JSON

），但我添加了模板，因此目前它创建了多个实例，我似乎无法在

电子邮件内容

模板中打印变量。我收到一个错误：

uncaughttypeerror:当我键入以下内容时，无法读取未定义的属性“get”：

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

发件人：发件人

因此，问题是：

如何重新呈现内容模板

如何访问内容模板中的电子邮件变量？
您的代码使用的是旧的
下划线.js
版本语法，如果您使用的是新版本，则这是一个问题，请使用新语法：

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

在下面一行：

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

电子邮件是一个模型，而不是一个集合

因此，您的代码应该是：

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

现在，您可以从发件人执行

我建议：

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

和类似于
From:sender
的渲染，只是为了确保模板内容不会影响原始模式


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

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

而是像这样定义您的模型

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

并在模型上设置
id
。主干将
id
附加到
url

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

其他建议：


为电子邮件的详细视图定义单独的视图
如果您是新手，请避免使用
el
属性
升级到新版本的
underline.js
，并将模板函数缓存在视图的
template
属性中
使事件列表更加具体，如
'click.email'：'showart'
。否则，单击视图中的任意位置将触发处理程序。如果用户点击一个元素，而该元素不是一封包含数据
id
（如下拉列表或其他内容）的实际电子邮件，则会导致错误
您的代码使用的是旧的
下划线.js
版本语法，如果您使用的是新版本，则这是一个问题，请使用新语法：

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

在下面一行：

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

电子邮件是一个模型，而不是一个集合

因此，您的代码应该是：

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

现在，您可以从发件人执行

我建议：

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

和类似于
From:sender
的渲染，只是为了确保模板内容不会影响原始模式


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

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

而是像这样定义您的模型

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

并在模型上设置
id
。主干将
id
附加到
url

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

其他建议：


为电子邮件的详细视图定义单独的视图
如果您是新手，请避免使用
el
属性
升级到新版本的
underline.js
，并将模板函数缓存在视图的
template
属性中
使事件列表更加具体，如
'click.email'：'showart'
。否则，单击视图中的任意位置将触发处理程序。如果用户点击一个元素，而该元素不是一封包含数据
id
（如下拉列表或其他内容）的实际电子邮件，则会导致错误
谢谢你的回答。从电子邮件中删除.models有帮助。我现在可以显示数据了。从事件
var Email=Backbone.Model.extend（{urlRoot:'Backbone/getEmail/'）中移动电子邮件
如果我为详细信息定义了不同的视图，我如何将所选电子邮件传递给该视图？@mindz
showarert:function（e）{this.emailView=new emailView（{model:model}）}
。您可以将EmailView
el
附加到EmailListView
el
或某些特定容器。您甚至可以使用EmailListView触发器和类似
this.trigger（'show-email'，{id:id}）的事件
并从应用程序中的其他位置侦听它，然后使用事件中的模型id初始化EmailDetailViewdata@mindz我会让emailList视图和emailDetails视图尽可能地解耦。另请参阅最后一条关于事件侦听器的建议。谢谢大家。我确实把它们分开了，并按照上面的建议做了。很好：）谢谢你的回答。从电子邮件中删除.models有帮助。我现在可以显示数据了。从事件
var Email=Backbone.Model.extend（{urlRoot:'Backbone/getEmail/'）中移动电子邮件
如果我为详细信息定义了不同的视图，我如何将所选电子邮件传递给该视图？@mindz
showarert:function（e）{this.emailView=new emailView（{model:model}）}
。您可以将EmailView
el
附加到EmailListView
el
或某些特定容器。您甚至可以使用EmailListView触发器和类似
this.trigger（'show-email'，{id:id}）的事件
并从应用程序中的其他位置侦听它，然后使用事件中的模型id初始化EmailDetailViewdata@mindz我会保持emailList视图和emailDetails视图与p一样解耦