Question

我在应用程序中使用小胡子时遇到问题。我偷了'可以......胡子'，我有一个具有这种结构的Model对象：

// 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提前!!!

Answer 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'));

CanJS和胡子

1 个答案: