Knockout View Loader Plugin

November 27th, 2014 — 1 min read

Knockout View Loader Plugin

Welcome back! as you know knockout version 3.2 is already out, and components are available now. The one thing though which i thought should have been available is loading external views on demand. For this purpose i have developed a plugin that fulfills this requirement. If you are not using AMD module pattern to work with, then you can use this plugin to load view files on demand. Let see what it presents us.

The plugin has only one function(ko.load.view) and it is bound to load .html extension files for the time being.

Here is how we are going to use. You just need to include this file in header.

var home = function(){
	var self = this
	self.name = ko.observable('Raheel')
}
 
var nameEditorComponent = {
	viewModel:home,
	template:ko.load.view('components/views/home') // Load view file
}	
 
ko.components.register('name-editor',nameEditorComponent)
 
$('document').ready(function () {
    ko.applyBindings()
})

And now you can use name editor component

    <name-editor></name-editor>

And that’s it.Also you should not it is not dependent on version 3.2. you can use it to load html files in previous versions too. Hope it is helpful.