試圖瞭解流星

<head> 
    <title>bubblePop</title> 
</head> 

<body> 


    <center>{{> hello}}<center> 
</body> 

<template name="hello"> 
    <h1>Bubble Pop!!!!</h1> 
    {{greeting}} 

</template>

我知道它的基本原理是怎麼回事{{> hello}}，所以你可以在任何地方插入{{> hello}}，它將和模板中的一樣。但我正在嘗試使用JavaScript在我的流星應用上製作一張大桌子。我如何將我的代碼放在把手中？我可以在我的JS文件中使用<template>嗎？只是有點困惑繼承人我的代碼的其餘部分： JS：試圖瞭解流星

if(Meteor.isClient) { 
    Meteor.startup(function(){ 
    $(document).ready(function(){ 
    var el; 
    for(var i=1; i<=64; i++){ 
     el = document.createElement('div'); 
     $(el).addClass('button'); 
     $(el).on('click', function(){ 
      $(this).addClass('removed'); 
     }); 
     $('#container').append(el); 
    } 
}); 


    }) 
<template name="bubbles"> 


    </template> 
    Template.hello.greeting = function() { 
    } 


    Template.hello.events({ 
    'click input' : function() { 
     // template data, if any, is available in 'this' 
     if (typeof console !== 'undefined') 
     console.log("You pressed the button"); 
    } 
    }); 
} 

if (Meteor.isServer) { 
    Meteor.startup(function() { 
    // code to run on server at startup 
    }); 
}

CSS：

#container { 
    width: 440px; 
    max-width: 440px; 
} 
#container > .button { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    background-image: url('http://placehold.it/50x50'); 
    margin-right: 5px; 
    margin-bottom: 5px; 
    opacity: 0.85; 
    transition: all 0.07s ease-in-out; 
    -moz-transition: all 0.07s ease-in-out; 
    -webkit-transition: all 0.07s ease-in-out; 
    cursor: pointer; 
} 
#container > .button:hover { 
    opacity: 1;  
} 
#container > .button.removed { 
    background-image: none; 
}

我怎樣才能得到所有這些按鈕的出現？有一些我只是沒有得到

來源

2013-12-15 user3103599

你看過這個嗎？ http://www.discovermeteor.com/ – Homer6

我正在閱讀它我只是不知道我在做什麼。 – user3103599

第3章 - 模板可以很好地解釋你問的問題。 – sbking

你正在嘗試將命令式編程技術應用於反應式範例。

當數據更改時，模板將使用更新後的數據隱式重新呈現。

嘗試在句柄中創建一個簡單循環並將表綁定到集合。然後通過集合（或光標）控制行的數量或行的順序。

請記住，如果您將模板綁定到文檔，則模板中的this是文檔。所以，你可以基於方法或成員顯示/隱藏按鈕。例如。 {{getFirstName}}就像是說my_document.getFirstName()。

<table id="comments"> 
    <tr> 
     <th>One</th> 
     <th>Two</th> 
    </tr> 
    {{#each comments}} 
     <tr> 
      <td>{{one}}</td> 
      <td>{{two}}</td> 
     </tr> 
    {{/each}} 
</table>

http://handlebarsjs.com/

來源

2013-12-15 04:15:03 Homer6

啊好吧。我不知道這裏告訴了什麼。流星對我來說太困惑了，我想我應該感謝答案。 – user3103599

當你第一次開始使用它時，一切都會令人困惑。堅持下去。流星是一個遊戲規則。未來幾年這個框架將會有很多工作。當你習慣使用它時，也很高興使用它。可能是因爲我的解釋不太好。 :-) – Homer6

試圖瞭解流星

回答

相關問題