我正在努力学习流星,并遇到了几个障碍.我有几个嵌套模板来显示我的应用程序中的所有用户信息:
users_list.html:
<template name='usersList'>
<div class='users'>
{{#each user}}
{{> userItem}}
{{/each}}
</div>
</template>
Run Code Online (Sandbox Code Playgroud)
和user_item.html:
<template name='userItem'>
<div class='user'>
<div class='user-content'>
<h3>User:</h3>
<h4>Email: {{emails}}</h4>
<h5>ID: {{_id}}</h5>
...
</div>
</div>
</template>
Run Code Online (Sandbox Code Playgroud)
以及相关的模板助手:
Template.usersList.helpers({
user: function(){
return Meteor.users.find().fetch();
}
});
Run Code Online (Sandbox Code Playgroud)
这适用于顶级属性,但如果我尝试通过更改user_item.html中的上述行显式访问电子邮件阵列中0索引上的.address属性:
<h4>Email: {{emails[0].address}}</h4>
Run Code Online (Sandbox Code Playgroud)
流星抱怨:
排队任务中的异常:错误:无法调用非函数:[object Object] ...
这让我感到困惑,因为我可以在控制台中执行此操作:
var userz = Meteor.users.find().fetch();
userz[0].emails[0].address // "jim@example.com"
Run Code Online (Sandbox Code Playgroud)
关于Meteor为什么不喜欢这个的任何想法?
另外,我一般在想,我可能需要将电子邮件数组的内容存储到变量中并重复上面相同的模式,除非将emails_list和email_item模板嵌套到user_item模板中.这似乎可行,但对于这个用例来说过于复杂.
最后,我真的只是想学习并实现一个合理的模式来访问和显示集合中文档的嵌套属性.任何想法或指导将不胜感激.
这只是你的语法问题,试试这个:
<h4>Email : {{emails.[0].address}}</h4>
Run Code Online (Sandbox Code Playgroud)
您需要使用点语法访问电子邮件阵列的第一个元素(键为"0"的属性).
https://github.com/meteor/meteor/wiki/Using-Blaze#dotted-helpers-with-numeric-indices
您还可以使用此模式显示电子邮件列表:
(from userItem)
{{> emailsList}}
<template name="emailsList">
<ul>
{{#each emails}}
{{> emailItem}}
{{/each}}
</ul>
</template>
<template name="emailItem">
<li>Address : {{address}}</li>
</template>
Run Code Online (Sandbox Code Playgroud)
我不认为这太复杂了(只是几个模板),而使用Meteor这很容易做到.只要合理,将模板切割成更多子模板,它将简化并加速DOM重新渲染数据失效.
此外,在帮助程序中返回游标时不需要使用fetch:#each块已经过优化,可以直接使用游标而不是数组.(它将足够聪明地仅重新呈现修改的项目而不是整个列表).