knockout js bootstrap combobox custom binding

Question

I have a question regarding using bootstrap combobox plugin in conjunction with knockout (and mvc).

I have a situation where I am using out of box MVC html helpers like Dropdownlisfor, textboxfor, etc in my template. I am using Knockout to bind a collection of data to the template. The mvc html helpers create a 'select' control for the DropDownlistfor helper. I need this to be rendered before I want to call my bootstrap plugin on the control so that all the necessary validation attributes, etc are set up. I initially used afterrender and in that method, I found the 'select' control and called the plugin on it.

Our issue is we dont want to do this every time we have to use the bootstrap combobox control in a similar way somewhere else. So, I have been researching about Custom Bindings (which I should have done already in the first place) and had a question about how I can use custom bindings in my stuation.

I found this article where he created a custom binding for bootstrap typeahead control. I can make a similar one to that for combobox. But I can only call it after the control is rendered. So, is there a way for us to specify KO to only perform custom binding "afterrender" instead of right away. That way, the select control is rendered and I can then call the plugin in the custom binding over the select control.

Here is some more info.

I have a table which uses a template

<table>
        <tbody data-bind='template: {name: "editorRowTemplate", foreach: rules, afterRender: function(data) {{$root.view.templateRendered(data) } }'>   </tbody>
</table>

I have the template which is similar to this

<script id="editorRowTemplate" type="text/html">

    <tr class="dataRow" data-bind="attr: { id: 'EditorRow' + $index() }">
        <td>
            <div class="editor-field">
                @Html.KnockOutDropDownListFor(rule => ruleTemplate.ReserveWordId, new List<SelectListItem>(), null,
                                                   new { @class = "combobox", data_bind = "options: $root.ReserveWords, optionsText:'Name', optionsValue:'ReserveWordId', attr : {id: $index(), name: $index()}" }, ((int)this.Model.Prefix).ToString())

                @Html.KnockOutValidationMessageFor(rule => ruleTemplate.ReserveWordId, "*", new { data_bind = "attr : { 'data-valmsg-for': $index()}" }, ((int)this.Model.Prefix).ToString())
            </div>
        </td>
    </tr>
</script>

I have my own html helpers (KnockoutDropDownListFor, etc) which generate a select control with specified KO bindings.

Please suggest what would be a good way to go about it. Let me know if you need more info.

beyond-code beyond-code · Accepted Answer · 2012-11-28T19:57:51

I'm not sure I fully understand the question. However you do not need to worry about waiting for the MVC helpers to render because this will happen server side and the knockout stuff will happen client side.

You also can use $(document).ready(function() {...}); if you want to make sure the DOM has loaded before doing anything.

knockout js bootstrap combobox custom binding

1 Answers