Question

I have a main page where i have all the scripts referred and inside the body i have a duv container which has template data binding and my htm’s are getting binded in there.

The problem is my functionality which is controlled by Jquery is not working properly.
For e.g. A date picker works when i put it in the main page where JavaScript are referred but doesn’t work inside my htm’s which are getting binded to the template.

All the libraries are getting loaded properly but my jquery functionality doesn’t work when its getting called inside the template.

e.g.
Main Page:

<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.qtip.js"></script>
<script src="Scripts/foundation.min.js"></script>
<script src="Scripts/jquery.tablesorter.js"></script>
<script src="Scripts/jquery-ui.js"></script>
<script src="Scripts/languageswitcher.js"></script>

<div id="Container" ua-app-id="topVm" data-bind='template: {name: pageModel, data: pageVM }'>                   
</div>
<!-- Initialize JS Plugins -->
<script src="Scripts/app.js"></script>

---

Now my view get loaded in the main page at run time. Inside my view i have a date picker, it doesn’t work. When i put that out in the main page it works fine.

Answer 1

I think this is because your jQuery code is run before your template is rendered. You can use the afterRender callback provided in the template binding to enable enable the datepicker. Look at the documentation for more information and examples.

But an even better method to accomplish this, is to create a custom binding. Something like this:

ko.bindingHandlers.datepicker = {
    init: function(element){
        $(element).datepicker();
    },
    update: function(element) {
        $(element).datepicker('refresh');
    }
};

Then you can make text-input into a datepicker by doing this:

<input type="text" data-bind="datepicker:true" />

Read more about custom bindings here