Как использовать jQuery в Meteor для создания пользовательских компонентов пользовательского интерфейса

Я хочу сделать собственное выпадающее меню, но оно может работать глобально, а не только в специализированном шаблоне. Это должно быть полезно, как bootstrap, с возможностью вызова везде, используя элементы со специальным .class.

Например, я хочу использовать это в метеоре в нескольких шаблонах, но не хочу повторяться:

JS

function DropDown(el) {
  this.dd = el;
  this.initEvents();
}

DropDown.prototype = {
  initEvents : function() {
    var obj = this;

    obj.dd.on('click', function(event){
        $(this).toggleClass('active');
        event.stopPropagation();
    }); 
  }
}

HTML

<div id="dd" class="wrapper-dropdown-2">Sign in with
<ul class="dropdown">
    <li><a href="#"><i class="icon-twitter icon-large"></i>Twitter</a></li>
    <li><a href="#"><i class="icon-github icon-large"></i>Github</a></li>
    <li><a href="#"><i class="icon-facebook icon-large"></i>Facebook</a></li>
</ul>


jquery meteor
person Andrey Nadosha    schedule 10.06.2016    source источник
comment
Что именно вы используете: React, Blaze или Angular?   -  person LazyCat01    schedule 10.06.2016

Ответы (1)


arrow_upward
1
arrow_downward

На jQuery сложно создавать повторно используемые компоненты, потому что он не поддерживает реактивность. Но Блейз легко с этим справится.

Единственный способ создавать повторно используемые компоненты в Blaze — использовать шаблоны. В вашем случае многоразовый шаблон может выглядеть так:

<template name="Dropdown">
    <div id="dd" class="wrapper-dropdown-2">{{label}}
        <ul class="dropdown">
            {{#each items}}
                <li><a href="#"><i class="{{icon}} icon-large"></i>{{name}}</a></li>
            {{/each}}
        </ul>
    </div>
</template>

JS

Template.Dropdown.events({
  'click .dropdown li': function (event, tmpl) {
    tmpl.data.onElementSelected(event);
  }
});

И тогда вы можете использовать его:

<template name="DropdownTest">
    {{> Dropdown dropdownConfig}}
</template>

JS

Template.DropdownTest.helpers({
  dropdownConfig: function () {
    return {
      label: 'Sign in with',
      items: [{
        icon: 'icon-twitter',
        name: 'Twitter'
        // ...
      }],
      onElementSelected: function (event) {
        //handle selected element
      }
    }
  }
});

Этот пример написан только с помощью Blaze. Но вы можете использовать дополнительные пакеты, позволяющие упростить разработку таких компонентов: компоненты blaze или компоненты потока.

person LazyCat01    schedule 10.06.2016