CanJS and Mustache

Question

I'm having problem using mustache in my application. I've stolen 'can.....mustache' and I've a Model object with this structure:

// widgets
Models.LayoutWidget = can.Model({
    findAll: 'GET /pages/{id}/layouts/widgets'
}, {});

Then with a fixture helper it grab these correctly:

var LAYOUT_WIDGETS = [
    {
        id: 1,
        name: 'Menu',
        config: {
            width: 4,
            height: 1
        }
    }
];

and that's the template:

<script id="layout-widget-template" type="text/mustache">
    <li class="layout-widget" {{data 'widget'}}>
        <span class="layout-widget-delete">&times;</span>
        <span class="layout-widget-name">{{name}}</span>
    </li>
</script>

and that's the code i use to get the template:

var template = can.trim(can.view.render('#layout-widget-template', widget));
// or
var template = can.trim(can.view('#layout-widget-template', widget));
// or same without trim

it just gives me

<li class="layout-widget" data-view-id='2'>
    <span class="layout-widget-delete">&times;</span>
    <span class="layout-widget-name"><span data-view-id='3'>@@!!@@</span></span>
</li> 

what the.....are those "@@!!@@" ??? it also dont bind data correctly because if i try

can.data(el, 'widget'); // gives undefined!!

I've other templates in my page that works correctly with those widgets items. Its driving me crazy!! i've tried {{self.name}}, {{this.name}} also in my template!!! Any help??? Tnx in advance!!!

Answer 1

The symbols you are seing are placeholders for live binding and will disappear once you add the rendered document fragment to the DOM.

I recommend always using can.view because it returns a document fragment instead of can.view.render which returns a string (which is probably also why the data helper doesn't work because data can only be attached to DOM elements). Document fragments already are a DOM structure so there is no reason to run it through can.trim (in fact it converts it back to a string and trims that string, which is very likely not what you need).

Here is a fiddle example which also logs the widget data to the console: http://jsfiddle.net/3gD2p/

// widgets
var LayoutWidget = can.Model({}, {});

var widget = LayoutWidget.model({
        id: 1,
        name: 'Menu',
        config: {
            width: 4,
            height: 1
        }
    });

$('#dummy').html(can.view('layout-widget-template', widget));

console.log($('.layout-widget').data('widget'));