CODEWITHSUNDEEP
javascriptjquerymeteor
user2755667
user2755667

Reputation:

Inserting Grid of buttons on meteor

I just recently started to use meteor trying to figure out how to make things work on it. I've been working on this for a couple of days. I'm reading discover meteor and trying to figure out how templates work. What am I doing wrong here? How do I get my buttons grid to appear?

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>

Definitely something very new and challenging for me am I on the right track? What do I need to do to make my grid appear and also will the grid be updated on the meteor server?

Upvotes: 0

Views: 166

Answers (1)

Christian Fritz
Christian Fritz

Reputation: 21364

You know that you are doing something wrong when you are manually creating DOM elements. That's not the template way of doing things and definitely not the meteor way either. You also have some general javascript errors in your code ("return el .."?)

Try something like this instead (untested):

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

And:

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

Upvotes: 1

Related Questions