knockout with requirejs and underscore to get external templating

Question

I am trying to build a small application using knockout, require, underscore.

I have my index page where i call in require and it points to a main.js were i keep my config

require.config({

paths: {
    jquery:     'vendor/jqm/jquery_1.7_min',
    knockout: 'vendor/knockout/knockout-2.2.0',
    underscore : 'vendor/underscore/underscore_amd',
    text:       'vendor/require/text',
    templates:  '../templates'
}

});

define(['app'], function(app) {

});

the rest of my index has no body. so when this is loaded it calls app.js

define(['jquery','knockout', 'appViewModel'],
 function($, ko, appViewModel) 
{
    ko.applyBindings(new appViewModel());
});

this should then call appViewModel which works ok. This is where i get a bit confused as i then want to load in a template from appViewModel

so I am trying to do something like this

define(['jquery','knockout', 'text!templates/homeViewTemplate.html', 'jqm'],
function($, ko, homeViewTemplate) {

      //call and load in template

});

this is where i get a bit stuck I know in backbone for example I could use

  template:_.template(homeViewTemplate)

but I am really not sure the best way of loading a template in here

I have looked at https://github.com/ifandelse/Knockout.js-External-Template-Engine but this doesnt work very well with require and if you use it without require and just put some text in a html file and call that in when I use jQuery mobile it doesnt add the classes etc.

I wondered if anyone could point me in the right direction.. I guess I am really trying to work out what code to put in here

    define(['jquery','knockout', 'text!templates/homeViewTemplate.html', 'jqm'],
function($, ko, homeViewTemplate) {

      //call and load in template

});

to call in the homeviewtemplate.

thanks

score 2 · Accepted Answer · answered Nov 19 '12 at 21:36

2

I use jQuery to insert the template HTML into the page and then apply my Knockout bindings.

$('#selector').append(homeViewTemplate);
ko.applyBindings(VIEWMODEL, $('#selector')[0]);

You may also be interested in my WIP article about advanced knockout binding.

answered Nov 19 '12 at 21:36

Mike B

2,660
3
20
22

Very interesting article. It would be great if you could put a code example of this on github. – Dan Nov 19 '12 at 23:12
I am trying to use this with jQueryMobile also - so I guess I am going to have to fire an event when a link is changed.. in backbone I would switch off the routing and then use the backbone router.. would you recommend doing a similar thing here because I am going to need to know when to load in another pages template.. – Dan Nov 19 '12 at 23:42
Yeah. That's probably the best plan. KnockoutJS doesn't come with a router, but it's not hard to implement a third part one. I don't have much experience with jQuery mobile, but it ought to work. – Mike B Nov 20 '12 at 00:51
1

To your point on the code example, I'm intending to do a much more thorough write up on this with examples when I get a chance. I'll probably end up posting it over on my blog: mberkompas.com – Mike B Nov 20 '12 at 00:52
I have implemented your idea but I am having some issues.. can you have a look at this? http://stackoverflow.com/questions/13469143/jquery-mobile-force-change-page-on-reload-jqm-knockout-sammy-knockout-load The main problem is that appending the body takes time and meaning the test app doesnt display correct sometimes – Dan Nov 20 '12 at 10:06

knockout with requirejs and underscore to get external templating

1 Answers1