0

我在我的应用程序中使用 mustache 时遇到问题。我偷了'can.....mustache'并且我有一个具有这种结构的模型对象：

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

然后使用夹具助手它正确地抓住这些：

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

这就是模板：

<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>

这就是我用来获取模板的代码：

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

它只是给了我

<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>

那些......是什么“@@!!@@”？？？它也没有正确绑定数据，因为如果我尝试

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

我的页面中有其他模板可以与这些小部件项目一起正常工作。这让我疯狂！！我已经在我的模板中尝试过 {{self.name}}、{{this.name}} ！！！有什么帮助？？？Tnx 提前！！！

4

1 回答 1

1

您看到的符号是实时绑定的占位符，一旦您将呈现的文档片段添加到 DOM，它们就会消失。

我建议总是使用can.view，因为它返回一个文档片段而不是can.view.render返回一个字符串（这可能也是数据助手不起作用的原因，因为数据只能附加到 DOM 元素）。文档片段已经是一个 DOM 结构，因此没有理由通过 can.trim 运行它（实际上它会将其转换回字符串并修剪该字符串，这很可能不是您需要的）。

这是一个小提琴示例，它还将小部件数据记录到控制台：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'));
于 2013-05-06T17:35:00.760 回答