aureliaと矢印機能を持つSelectize.js

Question

私はすべての現代的なもの、es2016、aurelia、typescriptで遊んでいます。

jquery selectizeライブラリを使用していますが、これはかなり正しく再生されていません。

は私が中にヒットされることはありませんレンダリングこの

$('#select-repo2').selectize({ 
       valueField: 'id', 
       labelField: 'id', 
       options: [], 
       create: false, 
       render: { 
        option: (item,escape) => { 
         debugger 
         return '<div>' + 
          '<span class="title">' + 
           '<span class="name">' + escape(item.first_name) + escape(item.last_name) + '</span>' + 
           '<span class="by">' + escape(item.email_address) + '</span>' + 
          '</span>' + 
         '</div>'; 
        } 
       }, 
       load: (query, callback) => { 
        if (!query.length) return callback(); 
         this.contactService.find(encodeURIComponent(query)).then(response=>{ 
         // return callback({ 'value': input, 'text': input}); 
         // var data = []; 
         // data.push({ 'value': response.data[0].id, 'text': response.data[0].email_address}); 
           //return callback({ 'value': response.data[0].id, 'text': response.data[0].id}); 
               // return callback(data); 

        return callback(response.data); 
        }); 
       } 
      }); 

デバッグ文を持っています。なぜこれが起こっているのか知っていますか？

私のコードはselectizejsデモサイトのコピー＆ペーストですが、矢印機能を使用するようにロードとレンダリングを変更しました。

すべてのヘルプは素晴らしいことだ

Answer 1

あなたのコードを実行している

をいただき、ありがとうございますか！この問題は、DOMが添付されているときにコードを実行している可能性が高いです。あなたのコードをattached()メソッドの中にviewmodelの中に入れると、そのコードはすでに動作していなければ動作します。

export class MyViewModel { 

attached() { 
$('#select-repo2').selectize({ 
       valueField: 'id', 
       labelField: 'id', 
       options: [], 
       create: false, 
       render: { 
        option: (item,escape) => { 
         debugger 
         return '<div>' + 
          '<span class="title">' + 
           '<span class="name">' + escape(item.first_name) + escape(item.last_name) + '</span>' + 
           '<span class="by">' + escape(item.email_address) + '</span>' + 
          '</span>' + 
         '</div>'; 
        } 
       }, 
       load: (query, callback) => { 
        if (!query.length) return callback(); 
         this.contactService.find(encodeURIComponent(query)).then(response=>{ 
         // return callback({ 'value': input, 'text': input}); 
         // var data = []; 
         // data.push({ 'value': response.data[0].id, 'text': response.data[0].email_address}); 
           //return callback({ 'value': response.data[0].id, 'text': response.data[0].id}); 
               // return callback(data); 

        return callback(response.data); 
        }); 
       } 
      }); 
} 

}