阻止组件呈现输入属性

Question

我有一个只显示标题的new httpGetProduct().execute(); 组件：

HTML

my-tag

的javascript

<div id="content"></div>

<script id="main-template" type="text/mustache">
    <my-tag title="This is the title"></my-tag>
</script>

输出

var Component = can.Component.extend({
    tag: 'my-tag',
    template: '<h1>{{title}}</h1>',
    viewModel: {
        title: '@'
    }
});

$('#content').html(can.view('main-template', {}));

我想输出如下：

<div id="content">
    <my-tag title="This is the title">
        <h1>This is the title</h1>
    </my-tag>
</div>

如何让组件不呈现<div id="content"> <my-tag> <h1>This is the title</h1> </my-tag> </div> 中的title属性？

这是jsfiddle。

Answer 1

您无法阻止渲染，但是，您可以在创建组件后删除它，如：

var Component = can.Component.extend({
    tag: 'my-tag',
    template: '<h1>{{title}}</h1>',
    viewModel: {
        title: '@'
    },
    events: {
      init: function(){
        this.element.removeAttr("title");
      }
    }
});

另外，如果您要开始一个新的CanJS项目，我建议您切换到can.stache，因为这将是3.0中的默认模板引擎。它与can.mustache高度兼容。