How to use Mustache with inline templates?

[enorog]

Hello,

As this is my first post, let me say: I love Sammy! It's clean,
accessible, the event triggers are brilliant. Really looking forward
to v0.5.

My question is: I'd like to use Mustache for templating. It all works
when I use template files on disk, but to avoid caching issues (I hit
the server 50 times for a simple table), I'd like to put the template
code directly in my JS file.

I have it set up like this:

-- snip --
var app = $.sammy(function() {
this.use(Sammy.Mustache);
var template = "<h1>Hello {{foo}}</h1>";

this.get('#/', function(context) {
var foo = "World";
var rendered = Mustache.to_html(template, foo);
context.$element().append(rendered);
}
-- snip --

It says Mustache is undefined. How could I get access to the Mustache
object, so I can follow the original tutorials from
http://github.com/janl/mustache.js/blob/master/README.md ?

Or, how could I use Sammy's partials, but without calling the actual
files, like this:

-- snip --
context.partial(template, { foo: "World" }, function(rendered) {
context.$element().append(rendered);
});
-- snip --

Thank you!
Enorog

[Aaron Quint]

Hey Enorog

Very easy answer: When you include Sammy.Mustache or Sammy.Template
they define helpers, that i call 'engines' for your app.
An engine is really just a method on the event context that takes a
string (the template) and an object (the data). So with your example:

var app = $.sammy(function() {
this.use(Sammy.Mustache);
var template = "<h1>Hello {{foo}}</h1>";

this.get('#/', function(context) {
this.foo = "World";
var rendered = this.mustache(template, this);
context.$element().append(rendered);
}

--AQ

Aaron Quint
http://www.quirkey.com

> --
> You received this message because you are subscribed to the Google Groups "Sammy.js" group.
> To post to this group, send email to sam...@googlegroups.com.
> To unsubscribe from this group, send email to sammyjs+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/sammyjs?hl=en.
>
>

[enorog]

Thank you!

I see what got me - I tried this.mustache, but I was inside the
$.each, so I had to use context.mustache.

I've put my template variables in another JS file and I've got
separation + no cache problems now, lovely. I did hit a problem that
is described in another thread - the source for Mustache is not the
latest one, so it doesn't support the best part - looping, like this:

var items = ["one","two"];
-- template --
{{#items}}
<li>{{.}}</li>
{{/items}}
-- template

How could I update Sammy.Mustache to the latest code without breaking
anything? Is there an easy copy/paste-until you reach "" way?

************************************************************************************************
... and since I've done some more research, maybe this will benefit
someone ...
************************************************************************************************

I also tried the Mustache partials approach. This is the basic setup:

var view = {
name: "Joe",
winnings: {
value: 1000,
taxed_value: 600
}
};
var template = "Welcome, {{name}}! {{>winnings}}"
var partials = {winnings: "You just won ${{value}} (which is $
{{taxed_value}} after tax)"};
var output = Mustache.to_html(template, view, partials)

I cannot get this to work in Sammy. If I try this:

-- snip --
context.mustache(t_items, view, t_items_partial);
-- snip --

it gives an Object error, and if I try to follow the original Mustache
code:

-- snip --
context.mustache.to_html(t_items, view, t_items_partial);
-- snip --

it says the to_html method is not defined.

Just reporting, I can make do with $.each and inline templates for
now.

Thank you again for your swift answer!
Jure (Enorog is my company ... it's just too weird to be a name :)

[Aaron Quint]

Hey Jure

dpree actually recently sent me a patch that supports mustache
partials and I just need to pull it in. I'll update the mustache src
while I'm at it, too.

Thanks,
--AQ

Aaron Quint
http://www.quirkey.com

[Aaron Quint]

OK

So I pulled dpree's fix in, and updated Mustache.js to the latest
source from janl's repo.
I changed dpree's code a little so you can pass partials the third
argument to mustache() or pass it as a key in the data object
e.g.

mustache("My template with {{>mypartial}}", {partials: {mypartial: "my
{{text}}}, mypartial: {text: "PARTIAL"}});
//=> My template with my PARTIAL

--AQ

Aaron Quint
http://www.quirkey.com

[enorog]

That sounds great. I actually had to sleep in between, but you're a
machine... :)

I just don't see the updated plugin file in GIT. I'm looking here:
http://github.com/quirkey/sammy/tree/master/lib/plugins and here
http://github.com/quirkey/sammy/tree/master/lib/min/plugins/

Am I doing it wrong?
Again, thank you, having these partials will make my templates much
cleaner!

Jure

[Aaron Quint]

Hey Jure,

My bad - I'm currently working in a different branch as I prepare the
0.5.0 release (some other major changes). The new mustache code is
here:
http://github.com/quirkey/sammy/tree/next/lib/plugins/

--AQ

Aaron Quint
http://www.quirkey.com

[enorog]

Everything works now! Thanks.

Good luck on 0.5, can't wait to see the changes.

Jure

[jeff oconnell]

guys, this thread has inspired me to try sammy.mustache, but i can't
seem to get it right.

i'm trying to following without getting the template to render correctly:

--snip--
this.get(
'#/widget/:id',
function ()
{
var id = this.params['id'] ;
var index = widgets_lookup[ id ] ;

//
// THIS GIVES ME THE TEMPLATE HTML BACK,
// BUT THE TOKENS AREN'T EXPANDED
//
this.partial(
'templates/widget_info.mustache',
{ widget : widgets[ index ] },
function( html )
{
$( "#widget_info" ).html( html ) ;
}
) ;

//
// THIS GIVES ME AN EMPTY STRING
//
var html = this.mustache(
'templates/widget_info.mustache',
widgets[ index ]
) ;
$( "#widget_info" ).html( html ) ;

}
) ;
--snip--

i'm modeling this approach on what i currently have with sammy.template.

any thoughts on what's wrong here?

jeff

[Aaron Quint]

Hey Jeff

Looks like there might be a little error in your second snippet -
in the first your basically doing

mustache(template, {widget: data})
and in the second you're just doing
mustache(template, data);

--AQ

Aaron Quint
http://www.quirkey.com

[jeff.oconnell]

for sake of completenessin case any other new folks are messing with
sammy/mustahce...

i got my template to work by doing two things:

1. i changed my javascript to:

--snip--
$.get(
'templates/widget_info.mustache',
function( response )
{
var html = context.mustache(
response,
widgets[ index ]
) ;
}
) ;
--snip--

2. i changed my template tokens from:

{{ widget.name }}
{{ widget.price }}

to

{{ name }}
{{ price }}

j-