jquery Bonsai というプラグインを改造してjqueryのオリジナルプラグインを作成しています。
https://github.com/14021939/dropdownCheckCombobox
dropdownCheckCombobox.js(96行目)で、this.bonsaiの子nodeが取得できません。(コンソールでの出力ではObject[]になります。)
丸投げで本当に申し訳ありませんが、なぜなのかさっぱりわかりません。助けてください。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するjquery Bonsai というプラグインを改造してjqueryのオリジナルプラグインを作成しています。
https://github.com/14021939/dropdownCheckCombobox
dropdownCheckCombobox.js(96行目)で、this.bonsaiの子nodeが取得できません。(コンソールでの出力ではObject[]になります。)
丸投げで本当に申し訳ありませんが、なぜなのかさっぱりわかりません。助けてください。
ブラウザの開発者ツールでブレークポイントを設定してみると、次のようになりました。
取得の仕方に問題があるわけではなく、実際その時点では this.bonsai
の子要素は何もないです。しかし一通りスクリプトを実行した後で確認すると、ちゃんとそこにリストやチェックボックスが生成されています。となると、チェックボックスが生成される前に上の処理が行われるのが問題 ということになります。
DropdownCheckCombobox.prototype.createBonsai
が以下のようになっていますよね。
this.bonsai = listTag.jsonList({
url: self.options.dataUrl,
onListItem: function(event, listItem, data, isGroup) {
if(!isGroup){listItem.attr('data-value', data.id);}
},
onSuccess: function(event, jsonList) {
return $(this.el).find('> ol').bonsai({
checkboxes: true,
createInputs: 'checkbox',
handleDuplicateCheckboxes: true,
expandAll: true
});
}
});
this.handleCombobox();
jsonList()
は url の読み込みを非同期に開始し、それ自身はすぐにreturnします。そして読み込みが完了したところで onSuccess を実行します。そのため、$(this.el).find('> ol').bonsai()
はきちんと読み込み後に実行されますが、 this.handleCombobox()
は読み込みを待たずに実行されてしまいます。
そして onSuccess
の戻り値は使われないようなので、 bonsai()
を return する意味はありません。
まとめると、jsonList()
の onSuccess
の中で、 bonsai()
を実行した後に、 handleCombobox()
を呼び出す必要がある、ということになります。こんな感じでしょうか。
this.bonsai = listTag.jsonList({
url: self.options.dataUrl,
onListItem: function(event, listItem, data, isGroup) {
if(!isGroup){listItem.attr('data-value', data.id);}
},
onSuccess: function(event, jsonList) {
$(this.el).find('> ol').bonsai({
checkboxes: true,
createInputs: 'checkbox',
handleDuplicateCheckboxes: true,
expandAll: true
});
self.handleCombobox();
}
});
onSuccess
の中では this が別のものになっているので、 self を使うことに注意してください。