簡體   English   中英

流星為什么不從模板助手中注入文本?

[英]Why isn't meteor injecting the text from my template helpers?

我試圖動態生成包含兩個不同數據集的表。 我的數據庫不為空,並且返回值也已得到驗證。 但是,當我檢查渲染的頁面時,相應的html就沒有了,好像沒有返回任何東西一樣。

模板/ html:

<template name="room">
<div class="container-fluid">
<h1> Sprint Retrospective</h1>
<hr>
<div class="input-group">
<input type="text" class="form-control thoughts" placeholder="Thoughts..." aria-describedby="basic-addon1">
<span class="input-group-addon">
        <input id="wentWell" type="checkbox" aria-label="..."> Went Well
      </span>
<span class="input-group-addon">
        <input id="wentWrong" type="checkbox" aria-label="..."> Went Wrong
      </span>
 <span class="input-group-btn">
        <button class="btn btn-default" type="button">Submit!</button>
      </span>
</div>
<hr>
{{#if haveCards}}
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6 col-sm-6">
                <div class="row">Went Well</div>
                {{#each wentWell}}
                    {{>card}}
                {{/each}}
            </div>
            <div class="col-xs-6 col-sm-6">
                <div class="row">Went Wrong</div>
                {{#each wentWrong}}
                    {{>card}}
                {{/each}}
            </div>
        </div>
    </div>
{{/if}}
</div>
</template>

Javascript:

"use strict";
/**
*
**/
var Cards = new Mongo.Collection('cards');
var allCards;
var wentWellCards;
var wentWrongCards;
if(Meteor.isClient){
    Tracker.autorun(function(){
         allCards = Cards.find({},{sort:{createdAt:-1}});
         wentWellCards = Cards.find({category:"Went Well"},{sort:{createdAt:-1}});
         wentWrongCards = Cards.find({category:"Went Wrong"},{sort:{createdAt:-1}});
    });
    Template.room.helpers({
        haveCards: function(){
            if(allCards != null && allCards != undefined && allCards.length > 0)
                return true;
            return false;
        },
        wentWell: function(){
            return this.wentWellCards;
        },
        wentWrong: function(){
            return this.wentWrongCards;
        }   
    });
}

傑里米(Jeremy)實際上回答了更多,但是..

讓我們嘗試修復該代碼。

讓我們更改wentWellwentWrong助手,使其看起來更干凈。

    wentWell: function(){
        return Cards.find({category:"Went Well"},{sort:{createdAt:-1}});
    },
    wentWrong: function(){
        return Cards.find({category:"Went Wrong"},{sort:{createdAt:-1}});
    }  

另外,對於haveCards助手,您可以執行以下操作

haveCards: function(){
 return Cards.find().count() >= 1 //for example or return just findOne() 
}

您的助手應該返回wentWellCards而不是this.wentWellCards等。

您的助手沒有反應性,因此,在加載數據時(在呈現頁面之后發生),助手不會重新運行。

簡單地,直接在助手中調用反應方法(minimongo查詢)。 一旦數據可用,這將使它們重新運行

另外,當您檢查計數時,您需要獲取集合

Cards = new Mongo.Collection('cards');
if(Meteor.isServer){
    Meteor.publish('cards', function() {
        return Cards.find({},{sort:{createdAt:-1}});
    });
}

if(Meteor.isClient){
    Template.room.onCreated(function(){
        this.subscribe('cards');
    });
    Template.room.helpers({
        haveCards: function(){
            var allCards = Cards.find({},{sort:{createdAt:-1}}).fetch();
            return (allCards != null && allCards != undefined && allCards.length > 0);
        },
        wentWell: function(){
            return wentWellCards = Cards.find({category:"Went Well"},{sort:{createdAt:-1}});
        },
        wentWrong: function(){
            return wentWrongCards = Cards.find({category:"Went Wrong"},{sort:{createdAt:-1}});
        }   
    });
}

並且您將需要從服務器發布集合並從模板進行訂閱(除非您正在使用自動發布)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM