我正在使用{{#each}}在Meteor中迭代一个集合,我想知道我是否在最后一个元素中,就像我在AngularJS中使用ngRepeat和$ last一样.
例如,它可用于构建人类可读的枚举,如"我喜欢猫,狗和海豚":
Template.myTemplate.helpers({
likedAnimals: function(){return ['dogs','cats','dolphins'];}
});
<template name='myTemplate'>
I like
{{#each likedAnimals}}
{{#if !$first && !$last}}, {{/if}}
{{#if $last}} and {{/if}}
{{this}}
{{/each}}
</template>
有没有办法检查Meteor中的这种情况？
我想if在Meteor Blaze模板中使用一个条件.假设您users在要复制任务的Users集合上有一个帮助,如果用户名是admin,则使用"红色"样式:
<ul>
{{#each users}}
<li {{#if(name==admin)}}class="red"{{/if}}>{{name}}</li>
{{/each}}
</ul>
我还没有找到一个可靠的例子.
Template.registerHelper("itemLookup", function(sku, property){
return Items.findOne({sku: sku})[property];
});
我如何在模板上调用它？
我想做的事情如下:
{{ itemLookup sku="i3_4030U" property="title" }}
它应该输出
"Intel Core i3 4030U"
我一直在按照教程制作一个简单的论坛,在最终得到所有代码后,它告诉我'模板未定义'
forum.html代码
<head>
<title>Forum</title>
</head>
<body>
{{> form}}
{{> posts}}
</body>
<template name="posts">
<h1>Posts</h1>
<ul>
{{#each posts}}
<li>
<h3>{{title}}</h3>
<p>{{body}}</p>
</li>
{{/each}}
</ul>
</template>
<template name="form">
<form>
<label>Post Title:
<input type="text" id="title" />
</label>
<label>Post Body:
<textarea id="body"></textarea>
</label>
<input type="submit" value="Submit" id="submit"/>
</form>
</template>
forum.js代码:
var Posts = new Meteor.Collection('posts');
if (Meteor.isClient) {
Template.posts.helpers({
Posts: function() {
return Posts.find();
}
});
}
Template.form.events = {
'click #submit': function(event){
event.preventDefault();
var title = $('#title').val();
var body = $('#body').val();
Posts.insert({
title: …我有一个10x10阵列代表10行,每行10个单元格.我想绘制一个网格,并根据数组中的值设置每个单元格的背景颜色:
0值为白色,1值为黑色
我已经设置了这个CSS:
.cell{
height: 20px;
width: 20px;
float: left;
margin: 0;
padding: 0;
}
.cell.live{
background-color: black;
}
.cell.dead {
background-color: white;
}
我根据2个参数根据数组中的值创建了一个将返回'live'或'dead'的帮助器:x和y
这是代码:
Template.grid.helpers({
cellState: function(x, y) {
if(screenArray[x][y] === 1){
return 'live';
}
else {
return 'dead';
}
}
});
我的问题是我不知道如何获得两个#each循环的@index
这是我的模板,我找不到?????的解决方案
<template name="grid">
<div class="gridWrapper">
{{#each row in rows}}
<div class="row">
{{#each cell in row}}
<div class="cell {{cellState @index ?????}}">{{this}}</div>
{{/each}}
</div>
{{/each}}
</div>
</template>
我正在为孩子们写一个定制的Blaze块助手:
<template name="parent">
{{> Template.contentBlock ..}}
</template>
<template name="child">
{{> Template.contentBlock ..}}
</template>
我的预期用例是拥有一个带有任意子节点的模板,我在html文件中定义.
{{#parent}}
{{#child id="child1" title="Child 1"}}
<p>This is content of child 1</p>
{{/child}}
{{#child id="child2" title="Child 2"}}
<p>This is content of child 2</p>
{{/child}}
{{#child id="childN" title="Child N"}}
<p>This is content of child N</p>
{{/child}}
{{/parent}}
到目前为止没问题.但是,在父模板中onCreated/ autorun我想要访问child模板.我想使用这些数据在父模板元素中动态创建
Template.parent.onCreated(function () {
const instance = this;
instance.state = new ReactiveDict();
instance.autorun(function () {
const contentBlocks = // how?
instance.state.set("children", contentBlocks);
});
});
Template.parent.helpers({ …我正在尝试编写一个可以放在模板中的Meteor包.所以我首先尝试注册一个帮手.
Template.registerHelper('testHelper', function(a, b) {
console.log(a);
console.log(b);
})
我在里面加了包装/packages,并在我的客户模板,当我加入{{testHelper "hello" "meow"}},控制台登录hello和meow,这是我所期待的.
当我加入{{testHelper "hello"}},我希望控制台登录hello和null,因为没有被作为第二个参数传递.但它返回hello了一个对象 -Spacebars.kw {hash: Object}
这是什么Spacebars.kw {hash: Object}？如果我想让它返回,我该怎么办null？
我从不同的域提供了所有图像文件,并将该主机名作为变量放入Meteor.settings中.那么,如何在Meteor模板中访问此变量？
例如,在此模板中,img.example.com用Meteor.settings或其他全局变量中定义的变量替换的最佳实践是什么？我不认为通过使用帮助程序将它传递给每个模板是个好主意.
<template name="products">
{{#each items}}
<img src="http://img.example.com/{{id}}.png">
{{/each}}
</template>
#each完成后我遇到回调问题.我有一个名为"content"的模板:
<template name="content">
{{#if Template.subscriptionsReady}}
{{#each currentData}}
<div data-cid="{{this._id}}"></div>
{{/each}}
{{else}}
Loading...
{{/if}}
</template>
起初我等待订阅,当有可用时,我遍历我的Collection {{#each}}并追加div.我需要的是当for-each循环完成时(换句话说DOM就绪)的一种回调.
Template.content.onRendered()
- >触发到早期
我还尝试在{{each}}之后附加一个图像并在其中激活一个函数onload:
<img style="height:0;width:0" src="*mysource*" onload="callback()">
- >有时工作但不知道可靠吗？
有没有办法得到这个回调？我不担心改变这个模板的结构,如果这带来了解决方案.
虽然这是按预期呈现的:
{{#each Items}} // a collection
{{title}}
{{/each}}
{{#each types}} // another ollection
{{refId}}
{{/each}}
如果我把它放在一起:
{{#each Items}}
{{title}}
{{#each types}}
{{refId}}
{{/each}}
{{/each}}
这#each types是空的.
模板助手:
Template.menuItems.helpers({
restMenuItems: function() {
return RestMenuItems.find({restRefId: this._id}, {sort:Template.instance().sort.get()});
},
restMenuSideItems: function() {
return RestMenuSideItems.find({restRefId: this._id}, {sort:Template.instance().sort.get()});
}
});
Template.menuItems.onCreated( function(){
this.subscribe('restMenuItems');
this.subscribe('restMenuSideItems');
});
还有一些模板代码:
{{#each restMenuItems}}
<div>
<select class="list-group select_side_addons">
{{#each restMenuSideItems}}
<option>{{restRefId}}</option>
{{/each}}
</select>
</div>
{{/each}}
即使更换时{{#each restMenuSideItems}}通过{{#each ../restMenuSideItems}},似乎什么都没有.
怎么了？