如何使用selectize.js獲取選定的id和文本值。流星？

Question

我通過這個例子中使用與流星selectize： meteor is not working with selectize.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> 

所以在onChange事件我想要得到的

值和id

該值的

到保存到數據庫。

結果可能是這樣的：{ID：1，文本：谷歌}

所以，我怎麼能這樣做？

從流星

Answer 1

您可以利用onChange回調selectize的Newber距離支持開箱即用。這是一個工作示例。

import { Template } from 'meteor/templating'; 
import { $ } from 'meteor/jquery'; 
import { _ } from 'meteor/underscore'; 

import selectize from 'selectize'; 

import './main.html'; 
import 'selectize/dist/css/selectize.css'; 

const selectLinks = [ 
    { id: 1, title: 'DIY', url: 'https://diy.org' }, 
    { id: 2, title: 'Google', url: 'http://google.com' }, 
    { id: 3, title: 'Yahoo', url: 'http://yahoo.com' }, 
]; 

const getLinkTitle = (id) => { 
    let title; 
    if (id) { 
    const selectedLink = _.find(selectLinks, (link) => { 
     return link.id === parseInt(id); 
    }); 
    if (selectedLink) { 
     title = selectedLink.title; 
    } 
    } 
    return title; 
}; 

Template.body.onRendered(function onRendered() { 
    $('#select-links').selectize({ 
    maxItems: null, 
    valueField: 'id', 
    searchField: 'title', 
    options: selectLinks, 
    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: '#' 
     }; 
    }, 
    onChange: function (values) { 
     if (values) { 
     values.forEach((value) => { 
      // Can save to your collection/database here; for now 
      // just logging in the format you requested. 
      console.log({ 
      id: value, 
      text: getLinkTitle(value) 
      }); 
     }); 
     } 
    } 
    }); 
}); 

Answer 2

注意這一點：

const getLinkTitle = (id) => { let title; if (id) { 
    const selectedLink = _.find(selectLinks, (link) => { 
     `return link.id === parseInt(id);` 
    }); 
    if (selectedLink) { 
     title = selectedLink.title; 
    } } return title; }; 

`return link.id === parseInt(id);` 

要小心，行代碼。這取決於你的ID。我正在使用mongoDB，因此它在我的真實應用程序中不再是數字。