Как получить selectize.js работать с meteor.js

Question

Я пытаюсь внедрить систему мечения UI, как один замеченный на метеорных форумах (с выпадающего меню тегов, цветные квадраты и описания.)

После некоторых поисковых запросов я пришел к выводу, что selectize.js (https://brianreavis.github.io/selectize.js/) является одной из самых богатых и наиболее активно управляемых библиотек для выполнения тегов. Мой текущий установку selectize.js: (примечание: Я уже попытался установить Jeremy: пакет selectize метеора, но не работает, либо)

1. selectize.js в клиенте/Библиотека

2. все таблицы стилей и другие вспомогательные файлы расслоение плотной в клиенте/

Однако я не могу получить следующий простой пример работы https://www.github.com/brianreavis/selectize.js/blob/master/examples/customization.html в проекте метеора.

Когда я нажимаю на поле выбора, выпадающее меню не появляется, они даже не генерируются. :/ Все, что я получаю это:

---------- Вот моя реализация в проекте метеора ----------

//js 
Template.hello.onRendered(function(){ 
    $('#select-links').selectize({ 
     maxItems: null, 
     valueField: 'id', 
     searchField: 'title', 
     options: [ 
     {id: 1, title: 'DIY', url: 'https://diy.org'}, 
     {id: 2, title: 'Google', url: 'http://google.com'}, 
     {id: 3, title: 'Yahoo', url: 'http://yahoo.com'}, 
     ], 
     render: { 
     option: function(data, escape) { 
      return '<div class="option">' + 
       '<span class="title">' + escape(data.title) + '</span>' + 
       '<span class="url">' + escape(data.url) + '</span>' + 
      '</div>'; 
     }, 
     item: function(data, escape) { 
      return '<div class="item"><a href="' + escape(data.url) + '">' + escape(data.title) + '</a></div>'; 
     } 
     }, 
     create: function(input) { 
     return { 
      id: 0, 
      title: input, 
      url: '#' 
     }; 
     } 
    }); 

}); 
<!-- html --> 
<template name="hello"> 
<select id="select-links" placeholder="Pick some links..."></select> 
</template> 

Любая помощь очень ценится! Если вы дадите мне хороший ответ, я помечаю его так.

Спасибо - ваш товарищ метеорит - Алекс

Answer 1

Я использую этот пакет https://atmospherejs.com/mologie/reactive-selectize и это работает для меня.

Вот мой код:

NewRO.js

Customers = new Mongo.Collection('customers'); 

Template.NewRO.onCreated(function(){ 
    var self = this; 
    self.autorun(function() { 
     self.subscribe('customers'); 
    }); 
}); 

Template.NewRO.onRendered(function() { 

    this.CustomerSelect = $('#CustomerSelect').reactiveSelectize({ 
     valueField: '_id', 
     labelField: 'name', 
     searchField: ['name'], 
     create: true, 
     persist: false, 
     closeAfterSelect: true, 
     options: function() { 
      return Customers.find(); //set your collection here 
     } 
    })[0].selectize; //use selctize instead of reactiveSelectize 
}); 

NewRO.html

<template name="NewRO"> 
    <select id="CustomerSelect" name="customer" tabindex="1"> 
     <option value="">Customer name</option> 
    </select> 
</template> 

style.css (если вы хотите использовать selectize на начальной загрузки модальный использования этого стиля)

.selectize-dropdown.selectize { 
    z-index 9999 
} 

Вот и все, и вы можете использовать любой параметр selectize в документе.