I have made a custom binding for bootstrap multiselect in Knockout JS.
I am new to custom bindings in Knockout JS.
I have taken this custom binding jsfiddle for bootstrap select and adapted it in this jsfiddle to be for bootstrap multiselect and also contain my own viewmodel data. The actual bootstrap multiselect button does display, so the user sees the multiselect element, but upon clicking it, nothing drops down.
Inspecting my webpage shows this output html for the <select>:
HTML (this is correct - issue is not with this):
<select multiple="multiple" data-bind="multiselect: _categoryID,
optionsText: '_name',
optionsValue : '_id',
multiselectOptions: { optionsArray: _categories }" class="multiselect" style="display: none;">
<option value="1">Meat-Free Meat</option>
<option value="2">Dairy-Free Dairy</option>
<option value="3">Confectionery</option>
<option value="4">Baking</option>
<option value="5">Dessert</option>
</select>
Here is the bit that goes below the select that the bootstrap multiselect plugin adds (this is not correct - issue is here - see the <ul> has no <li>'s. :
<div class="btn-group">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Dairy-Free Dairy, Confectionery" aria-expanded="false">
<span class="multiselect-selected-text">Dairy-Free Dairy, Confectionery</span>
<b class="caret"></b>
</button>
<ul class="multiselect-container dropdown-menu">
</ul></div>
Why does clicking the bootstrap multiselect button not cause a dropdown to appear? AKA why is the the <ul> empty?
EDIT: All work on this question can now be tried in this jsfiddle