Вставка сетки кнопок на метеор

0

Недавно я начал использовать метеор, пытаясь понять, как заставить все работать над этим. Я работаю над этим пару дней. Я читаю об обнаружении метеора и пытаюсь выяснить, как работают шаблоны. Что я здесь делаю неправильно? Как я могу получить сетку кнопок?

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>

Определенно, что-то очень новое и сложное для меня, я на правильном пути? Что мне нужно сделать, чтобы моя сетка появилась, а также будет ли сетка обновляться на метеоритном сервере?

Теги:
meteor

1 ответ

1
Лучший ответ

Вы знаете, что вы делаете что-то неправильно, когда вручную создаете элементы DOM. Это не шаблонный способ делать вещи и определенно не метеорный путь. У вас также есть некоторые общие ошибки JavaScript в вашем коде ("return el.."?)

Попробуйте что-то вроде этого (непроверено):

<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');
   }
});
Поделиться
  • 0
    Хорошо @christianf поместил это в мое пятно if (Meteor.isClient), и это все еще, кажется, не работает
  • 0
    спасибо за серийное понижение меня! Ваш код совсем не полезен, и я собираюсь разобраться в этом сам, спасибо за всю вашу тяжелую работу!
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню