我有一个项目集合,我想填入引导网格.这看起来像这样:
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
Run Code Online (Sandbox Code Playgroud)
所以我需要遍历我的集合并在每秒后添加
有两个问题:
如果有一些例子,那将是最好的.
谢谢你的任何投入
我的应用程序中有主页,联系页面和其他几个与产品相关的页面.
目标是将背景图像应用于ONLY特定路线:/homepage和/contact.如果用户离开任一路线,请应用一些css更改.
我现在正在我的主页上用帮助器一起攻击这个,如下所示:
Template.homepage.rendered = function () {
var route = Router.current();
if ( route.path == '/' ) {
document.body.className = "showBackgroundImage";
}
};
Run Code Online (Sandbox Code Playgroud)
部分胜利在这里,因为这将激活css,但我需要在路线改变时停用.我也尝试了以下内容router.js:
this.route('homepage', {
path: '/',
onAfterAction: function (argument) {
// add a class name to body
document.body.className = "showBackgroundImage";
}
});
Run Code Online (Sandbox Code Playgroud)
和CSS在后台标准:
.showBackgroundImage {
background: url(bgImage.jpg) no-repeat center center fixed;
}
Run Code Online (Sandbox Code Playgroud) 我在布局文件中有一个用于铁路由器的通用{{> yield}},它呈现我的页面,这是模板.
在我的一个页面中,我有一个侧边菜单,根据此菜单中的选择,我想在此页面中加载与此页面相关的不同模板.
我怎样才能做到这一点?
我目前正在开发一个长期的Web应用程序Meteor.随着时间的推移,开发人员会来来往往.因此,为了确保整个应用程序保持相同的外观和感觉,我希望能够使用meteor的模板系统创建标准组件.因此,功能模板不应包含任何html,而这些html应该都包含在组件模板中.
我试过meteor-polymer但它只是崩溃我的应用程序,感觉我应该使用流星模板系统而不是添加另一个库.聚合物也很大程度上取决于Meteor所依赖的模板标签,所以我不太确定
基本上我想在模板中做的是这样的:
<template name="someRandomFeature">
{{#_RadioGroup name="dataInput" context=. formData=formData}}
{{#_setLabel}}Test set{{/_setLabel}}
{{#_addRow}}
{{assignValues value="random"}}
{{#_setCaption}}Random{/_setCaption}}
{{/_addRow}}
{{#_addRow}}
{{assignValues value="expression"}}
{{#_setCaption}}Expression: {{_TextInput name="testSetExpression" inline=true}}{{/_setCaption}}
{{/_addRow}}
{{/_RadioGroup}}
{{#_FormGroup}}
{{#_Config}}
{{assignValues numRows=2}}
{{/_Config}}
{{#_setRow 0}}
{{#_SetLabel}}Number of tests{{/_SetLabel}}
{{#_setStageContent}}
{{> _DropDown name="numberOfTests" items=numberOfTestsList formData=formData}}
{{/_setStageContent}}
{{/_setRow}}
{{#_setRow 1}}
{{#_SetLabel}}To email address{{/_SetLabel}}
{{#_setStageContent}}
{{> _TextInput name='respondentSelection' formData=formData}}
<span class="help-block text-left">Send all test mails to this email adress</span>
{{/_setStageContent}}
{{/_setRow}}
{{/_FormGroup}}
</template>
Run Code Online (Sandbox Code Playgroud)
组件示例:
<template name="_FormGroup">
{{#with numRows=0 context=. formdata=formdata stage='config'}}
{{#with execBlock UI.contentBlock}} …Run Code Online (Sandbox Code Playgroud) 有没有办法在流星大火中的每个块助手中访问数组索引?
我正在寻找这样的东西.
{{#each myarray}}
{{this.arrayIndex3}}
{{/each}}
Run Code Online (Sandbox Code Playgroud) 在Meteor中,我将数据库中的两个对象发送到模板:
Template.myTemplate.helpers({
helper1: function() {
var object1 = this; // data context set in iron:router...path is context dependent
// modify some values in object1
return this;
},
helper2: function() {
return Collection2.find({_id: this.object2_id});
}
});
Run Code Online (Sandbox Code Playgroud)
该模板还有一个事件处理程序来修改上面的两个对象.我试图从上面访问helper1和helper2,但如果我调用模板的数据上下文,我只能访问未修改版本的object1.如何访问上面定义的帮助程序?
Template.myTemplate.events({
'submit form': function(event) {
event.preventDefault();
// Access helper2 object and attributes here instead of calling Collection2.find() again
}
});
Run Code Online (Sandbox Code Playgroud) 说我有一个看起来像这样的帮手:
Template.profile.helpers({
info: {
Name: 'Bob Dinkleberg',
Age: 45,
Location: 'Earth, Milky Way'
}
});
Run Code Online (Sandbox Code Playgroud)
我想把这个信息放在一个<ul>.这是一些伪代码:
<template name="profile>
<ul>
{{#each}}
<li> {{key}}: {{property}} </li>
{{/each}}
</ul>
</template>
Run Code Online (Sandbox Code Playgroud)
请原谅我,如果这是微不足道的,我是Meteor和Blaze的新手,我无法在网上找到解决方案.
我正在尝试让Jade与Meteor的Flow Router和Blaze合作.不知何故,它对我不起作用.我很确定它只是一些我没注意到的小东西.
home.jade和layout.jade文件的HTML版本提供了正确的工作结果.
根据这个,曾经有一个问题,但它在0.2.9版本的mquandalle:jade中得到了解决.
$ meteor list
blaze 2.1.2 Meteor Reactive Templating library
kadira:blaze-layout 2.0.0 Layout Manager for Blaze (works well with FlowRou...
kadira:flow-router 2.3.0 Carefully Designed Client Side Router for Meteor
meteor-platform 1.2.2 Include a standard set of Meteor packages in your...
mquandalle:jade 0.4.3 Jade template language
Run Code Online (Sandbox Code Playgroud)
layout.jade
template(name="layout")
+Template.dynamic(template="main")
Run Code Online (Sandbox Code Playgroud)
home.jade
template(name="home")
p Looks like working!
Run Code Online (Sandbox Code Playgroud)
routes.js
FlowRouter.route('/', {
name: 'home',
action: function() {
BlazeLayout.render('layout', {main: 'home'});
}
});
Run Code Online (Sandbox Code Playgroud)
结果:
<body>
<div id="__blaze-root">
</div>
</body>
Run Code Online (Sandbox Code Playgroud) 刚刚开始使用Meteor,所以我可能会遗漏一些基本的东西.在Meteor 1.2中,他们有{{@index}}指令.
在模板中,如果我有:
...
{{#each items}}
{{@index}}
{{> childTemplate}}
{{/each}}
...
<template name="childTemplate">
{{@index}}
</template>
Run Code Online (Sandbox Code Playgroud)
该@index主模板将工作,但一个在childTemplate不会.我使用它的工作是调用childTemplate传入@index:
{{> childTemplate @index=@index}}
Run Code Online (Sandbox Code Playgroud)
这是正确的方法吗?还是有更多的东西?
虽然这是按预期呈现的:
{{#each Items}} // a collection
{{title}}
{{/each}}
{{#each types}} // another ollection
{{refId}}
{{/each}}
Run Code Online (Sandbox Code Playgroud)
如果我把它放在一起:
{{#each Items}}
{{title}}
{{#each types}}
{{refId}}
{{/each}}
{{/each}}
Run Code Online (Sandbox Code Playgroud)
这#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');
});
Run Code Online (Sandbox Code Playgroud)
还有一些模板代码:
{{#each restMenuItems}}
<div>
<select class="list-group select_side_addons">
{{#each restMenuSideItems}}
<option>{{restRefId}}</option>
{{/each}}
</select>
</div>
{{/each}}
Run Code Online (Sandbox Code Playgroud)
即使更换时{{#each restMenuSideItems}}通过{{#each ../restMenuSideItems}},似乎什么都没有.
怎么了?
meteor ×10
meteor-blaze ×10
javascript ×5
spacebars ×3
iron-router ×2
templates ×2
css ×1
flow-router ×1
html ×1
pug ×1