防止组件呈现输入属性

Question

我有一个只呈现标题的 my-tag 组件：

html

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

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

javascript

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>

如何让组件不呈现my-tag中的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 高度兼容。

防止组件呈现输入属性

Prevent component from rendering input attributes

canjs

html

javascript

输出