[英]How can I access the attribute from the template?
In this example i'm expecting it to say "hello world" but the world isn't picked up from the saying attribute. 在此示例中,我希望它说“ 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")
});
})();
Templates: 模板:
<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>
You need to tell the component that you want to access the attributes plain value like this: 您需要像这样告诉组件您要访问属性纯值:
can.Component.extend({
tag: "app-say",
scope: {
saying: '@',
greeting: 'salutations'
},
template: can.view("sayTemplate")
});
See this Fiddle . 看到这个小提琴 。 What you eventually might want to do use an observable attribute from your application state instead of the plain string value.
您最终可能想要使用的是应用程序状态中的observable属性,而不是纯字符串值。 This might look like:
可能看起来像:
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")
});
And a template like: 和类似的模板:
<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>
This also creates a cross-bound input field that will update the name everywhere whenever you update the text field. 这还会创建一个跨界输入字段,每当您更新文本字段时,该字段都会在任何地方更新名称。 Fiddle is here .
小提琴在这里 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.