performance / templating issues when using requirejs with JQuery, jQuery Mobile, Knockout and Sammy to build a structured app with External Templates

Question

I have a setup for a test app which includes require.js, jQuery, jQueryMobile (jqm), knockout and sammy

require.js loads in jqm, knockout and sammy

on the app ma

Answer 1

Looking at your demo, I can suggest a few things to try.

1. In main.js remove the dependency on jqm-config and add it to app.js. That way, you will always be guaranteed to have set up your jquery mobile configuration before anything in app.js is run.
2. Make sure your ko.applyBindings() call is wrapped in a .ready() construct.
3. Every single time you switch pages, you're re-binding knockout to the same node. That's not best practice and can result in some strange behavior. If you're going to do that, make sure to unapply the bindings first. See how here.

Even with all those items fixed, I'm not sure that the way you're going about things will work. You may be better off loading all the HTML up front and binding all the pages to one parent viewmodel with subviewmodels.