Question

我想制作自定义下拉菜单，但它可以全局工作，而不仅仅是专用模板。它需要像bootstrapp一样有用，可以使用带有特殊.class的元素调用任何地方。

例如，我想在流星中使用这个模板，但不想重复我的自我：

JS

public static class Mapper
{
    public static Mapper<T> GetFor<T>(T type)
    {
        return new Mapper<T>();
    }
}

HTML

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

Answer 1

很难在jQuery上构建可重用的组件，因为它不支持反应性。但Blaze可以很容易地处理它。

在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 components或flow components。

如何在Meteor中使用jQuery构建自定义ui组件

1 个答案: