Using Selectpicker with Knockout

问题:

i use Knockout to make a smooth CRUD, so i have theese two scripts options it shows the display, as a default and it shows Edit when i want to create or update:

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


    <td data-bind="text: Date"></td>
    <td data-bind="text: Dato"></td>
    <td data-bind="text: Timer"></td>
    <td data-bind="text: Ov1"></td>
    <td data-bind="text: Ov2"></td>
    <td data-bind="text: Overtid"></td>
    <td data-bind="text: Be"></td>
    <td data-bind="text: Skole"></td>
    <td data-bind="text: Dyrtid"></td>
    <td data-bind="text: Bem"></td>

    <td data-bind="text: Timestamp"></td>
    <td data-bind="text: user"></td>

    <td>
        <button class="btn btn-success kout-edit">ændre</button>
        <button class="btn btn-danger kout-delete">slet</button>
    </td>


</script>

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


    <td><u>Medarbejder</u><br />@Html.DropDownList("MedarbejderId", (SelectList)ViewBag.MedarbejderId, "Vælg medarbejdere", htmlAttributes: new
                           {
                               @class = "selectpicker",
                               data_show_subtext = "true",
                               data_live_search = "true"
                           })
    </td>

    <td><u>Lønkørsel Dato</u><br /><input class="form-control col-md-1" id="Date" type="date" name="Date" data-bind="value: Date" />
        <br /> <u>Overtid</u><br /><input class="form-control" id="Overtid" style="width:75px;" type="number" data-bind="value: Overtid" />
    </td>
    <td><u>Montage Dato</u><br /><input class="form-control col-md-1" id="Dato" type="date" name="Dato" data-bind="value: Dato" />
        <br /> <u>Skole</u><br /><input class="form-control" id="Skole" style="width:75px;" type="number" data-bind="value: Skole" />
    </td>
    <td><u>Timer</u><br /><input class="form-control col-md-1" id="Timer" type="number" data-bind="value: Timer" />
      <br /> <u>Dyrtid</u><br /> @Html.DropDownList("Dyrtid", (SelectList)ViewBag.Dyrtid, "", new { data_bind = " value:  Dyrtid", @id = "Dyrtid",  @class = "chosen-select", @style = "width:350px;", @tabindex = "4" })
    </td>
    <td><u>Ov1</u><br /><input class="form-control" id="Ov1" style="width:75px;" type="number" data-bind="value: Ov1" />
    </td>
    <td><u>Ov2</u><br /><input class="form-control col-md-2" id="Ov2" type="number" style="width:150px;" step="0.01" data-bind="value: Ov2" />
    </td>
    <td><u>Be</u><br /><input class="form-control col-md-2" id="Be" style="width:150px;" type="number" step="0.01" data-bind="value: Be" />
    </td>

    <td>
        <button class="btn btn-success kout-update">Gem</button>
        <button class="btn btn-danger kout-cancel">Afbryd</button>
    </td>
</script>

But the issues i am having is with the:

<td><u>Medarbejder</u><br />@Html.DropDownList("MedarbejderId", (SelectList)ViewBag.MedarbejderId, "Vælg medarbejdere", htmlAttributes: new
                       {
                           @class = "selectpicker",
                           data_show_subtext = "true",
                           data_live_search = "true"
                       })
</td>

The selectpicker works fine if i move it outside the Script tag. Do you guys have a smart solution for this issue? Need a good way to add:

$(".selectpicker").selectpicker({
        liveSearch: true,
        showSubtext: true
    });

when it has rendered the Dropdown.

Thanks.