[英]How can I access the attribute from the template?
在此示例中,我希望它说“ hello world”,但是该世界不是从saying属性中选取的。
(function () {
'use strict';
$(function () {
// Set up a route that maps to the `filter` attribute
can.route(':filter');
// Render #app-template
$('#app').html(can.view('appTemplate', {}));
// Start the router
can.route.ready();
});
can.Component.extend({
tag: "say",
scope: {
saying: function(){
return this.attr('saying')
},
greeting: 'salutations'
},
template: can.view("sayTemplate")
});
})();
模板:
<div id="app"></div>
<script id="appTemplate" type="text/mustache">
<b>Hello</b>
<say saying="world"></say>
</script>
<script id="sayTemplate" type="text/mustache">
<b>{{saying}}.</b> <i>{{greeting}}</i>
</script>
您需要像这样告诉组件您要访问属性纯值:
can.Component.extend({
tag: "app-say",
scope: {
saying: '@',
greeting: 'salutations'
},
template: can.view("sayTemplate")
});
看到这个小提琴 。 您最终可能想要使用的是应用程序状态中的observable属性,而不是纯字符串值。 可能看起来像:
var appState = new can.Map({
name: 'World'
});
$(function () {
// Set up a route that maps to the `filter` attribute
can.route(':filter');
// Render #app-template
$('#app').html(can.view('appTemplate', appState));
// Start the router
can.route.ready();
});
can.Component.extend({
tag: "app-say",
scope: {
greeting: 'salutations'
},
template: can.view("sayTemplate")
});
和类似的模板:
<div id="app"></div>
<script id="appTemplate" type="text/mustache">
<b>Hello</b>
<app-say saying="{name}"></app-say>
<div><input type="text" can-value="name"></div>
</script>
<script id="sayTemplate" type="text/mustache">
<b>{{saying}}.</b> <i>{{greeting}}</i>
</script>
这还会创建一个跨界输入字段,每当您更新文本字段时,该字段都会在任何地方更新名称。 小提琴在这里 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.