标签: meteor-blaze

如何在Meteor.js中使用Blaze构建网格?

我有一个项目集合,我想填入引导网格.这看起来像这样:

 <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)

所以我需要遍历我的集合并在每秒后添加

有两个问题:

  • 无效的HTML!不知道如何解决这个问题
  • 该模块的问题,但我认为我可以解决一些帮助.

如果有一些例子,那将是最好的.

谢谢你的任何投入

javascript meteor meteor-blaze

5
推荐指数
1
解决办法
1361
查看次数

meteor js iron router:路由更改时应用CSS更改

我的应用程序中有主页,联系页面和其他几个与产品相关的页面.

目标是将背景图像应用于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)

javascript css meteor iron-router meteor-blaze

5
推荐指数
1
解决办法
2843
查看次数

Meteor.js应用程序模板中的多个产量

我在布局文件中有一个用于铁路由器的通用{{> yield}},它呈现我的页面,这是模板.

在我的一个页面中,我有一个侧边菜单,根据此菜单中的选择,我想在此页面中加载与此页面相关的不同模板.

我怎样才能做到这一点?

meteor iron-router spacebars meteor-blaze

5
推荐指数
1
解决办法
4292
查看次数

用于创建可重用组件的模式

我目前正在开发一个长期的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)

templates meteor meteor-blaze

5
推荐指数
1
解决办法
182
查看次数

Meteor blaze按数组索引选择特定项

有没有办法在流星大火中的每个块助手中访问数组索引?

我正在寻找这样的东西.

{{#each myarray}}
    {{this.arrayIndex3}}
{{/each}}
Run Code Online (Sandbox Code Playgroud)

meteor meteor-blaze

5
推荐指数
1
解决办法
1603
查看次数

访问Meteor事件处理程序中的模板助手字典

在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)

javascript meteor meteor-blaze

5
推荐指数
1
解决办法
3465
查看次数

在Blaze模板中访问对象的属性名称

说我有一个看起来像这样的帮手:

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的新手,我无法在网上找到解决方案.

html javascript templates meteor meteor-blaze

5
推荐指数
1
解决办法
2345
查看次数

如何使用Meteor与Jade,Flow Router和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-blaze flow-router pug

5
推荐指数
1
解决办法
733
查看次数

Meteor 1.2将@Index传递给子模板

刚刚开始使用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)

这是正确的方法吗?还是有更多的东西?

meteor spacebars meteor-blaze

5
推荐指数
1
解决办法
377
查看次数

为什么嵌套模板输出中的每一个都没有

虽然这是按预期呈现的:

{{#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}},似乎什么都没有.

怎么了?

javascript meteor spacebars meteor-blaze

5
推荐指数
1
解决办法
57
查看次数