유성에 버튼 그리드 삽입하기

최근 유성을 사용하여 어떻게 유물을 작동시키는지를 알아 내려고했습니다. 나는 이틀 동안이 일을 해왔다. 나는 유성을 발견하고 템플렛이 어떻게 작동하는지 알아 내려고합니다. 여기서 내가 뭘 잘못하고 있니? 버튼 격자를 표시하려면 어떻게합니까?유성에 버튼 그리드 삽입하기

JS/jQuery를 :

if (Meteor.isClient) { 
    Template.bubbles.grid = function() { 

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

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

    }); 
}

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; 
}

HTML : 제가 바른 길에 나는 아주 새로운 도전

<head> 
    <title>bubblepopper</title> 
</head> 

<body> 
    {{> hello}} 
</body> 
<template name ="grid"> 
    <div id="container"></div> 

</template> 
<template name="hello"> 
    <h1>Hello World!</h1> 
    {{> grid}} 

</template>

확실히 뭔가? 그리드를 표시하려면 유성 서버에서 그리드를 업데이트해야합니까?

출처

2013-12-16 Anonymous

DOM 요소를 수동으로 만들 때 뭔가 잘못하고 있다는 것을 알고 계실 것입니다. 그건 일을하는 템플리트 방식이 아니고 유성애 방식이 아닙니다. 당신은 또한 당신의 코드에서 몇 가지 일반적인 자바 스크립트 오류가 ("엘을 돌려 ..."?)

이 대신 (테스트되지 않은) 같은 것을보십시오 :

<template name ="grid"> 
    {{#each buttons}} 
    <div class='button'>button {{value}}</div> 
    {{/each}} 
</template>

그리고 :

Template.grid.buttons = function() { 
    var list = []; 
    for(var i=1; i<=64; i++){ 
     list.push({value: i}); 
    } 
    return list; 
}; 

Template.grid.events({ 
    'click .button': function(ev) { 
     $(ev.target).addClass('removed'); 
    } 
});

출처

2013-12-16 03:39:13

좋아 @christianf을 내 if (Meteor.isClient) 지점에 넣으십시오. 여전히 작동하지 않는 것 같습니다. –

저에게 serial downvoting 해 주셔서 감사합니다! 귀하의 코드는 전혀 도움이되지 않으며, 모든 노력에 감사드립니다. –

나는 한 번만 당신을 downvoted하고, 나는 그것을 설명하는 텍스트를 남겼습니다. 그러니 다르게 요구하지 마십시오. 다시 말하지만 도움을 원하지 않으면 여기에 오지 마십시오. –

유성에 버튼 그리드 삽입하기

답변

관련 문제