selectize.jsを使って選択したIDとテキスト値を取得する方法。流星？

Question

私はこの例を経由して流星とselectizeを使用しています： onChangeイベントでそう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> 

を私はその値の

値とid

を取得したいですデータベースに保存します。だから私はそれをどのように行うことができます

{Google ID：：1、テキスト}

結果は次のようなものだろうか？流星

Answer 1

あなたはselectize onChangeコールバックを活用できるの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を使用していますので、実際のアプリケーションではそれ以上の数にはなりません。