Using mustache templates with knockout.js

javascript knockout.js mustache
Alex KeySmith picture Alex KeySmith · Sep 19, 2011 · Viewed 8k times · Source

I wish to use knockout.js, but unfortunately I cannot use jquery-tmpl due to the prequisite of jquery 1.4.2, which (I won't go into it here) we cannot upgrade to.

Has anyone got any tips on getting started using Mustache templates with knockout? I've been finding it tricky to find any information regarding it.

Answer

WTK picture WTK · Sep 19, 2011

Update I've released initial version of template engine for knockout js that is using mustache as a template library. You can check it out at https://github.com/WTK/ko.mustache.js

Have you seen this part of documentation http://knockoutjs.com/documentation/template-binding.html ? Especially take a closer look at the Note 8 which points you to check the jqueryTmplTemplateEngine.js in the knockout source code (to spare you the effort of searching, its this one: https://github.com/SteveSanderson/knockout/blob/master/src/templating/jquery.tmpl/jqueryTmplTemplateEngine.js).

I just took a glance at source of that file, but everything seems to be quite simple. You have to define couple of callback functions that are (I assume) called by knockout js when needed.

Those functions include:

function renderTemplateSource(templateSource, bindingContext, options) {}
function createJavaScriptEvaluatorBlock(script) {}
function addTemplate(templateName, templateMarkup) {}

Check what those functions return when using jquery.tmpl and try to mimic their behavior whilst using moustache instead.

Related questions

How to clear/remove observable bindings in Knockout.js?

I'm building functionality onto a webpage which the user can perform multiple times. Through the user's action, an object/model is created and applied to HTML using ko.applyBindings(). The data-bound HTML is created through jQuery templates. So far so …

Read More
Javascript Equivalent to C# LINQ Select

Following this question here : Using the checked binding in knockout with a list of checkboxes checks all the checkboxes I've created some checkboxes using knockout that allow selection from an array. working fiddle taken from above post: http://jsfiddle.net/…

Read More
Passing parameter using onclick or a click binding with KnockoutJS

I have this function: function make(place) { place.innerHTML = "somthing" } I used to do this with plain JavaScript and html: <button onclick="make(this.parent)">click me</button> How can I do this using idiomatic knockout.…

Read More