Polymer 1.0 中自动绑定模板中的计算绑定
Computed bindings in auto-binding templates in Polymer 1.0
如何在自动绑定模板(即声明为 <template is='dom-bind'>...</template>
的模板)中定义计算绑定?
只需通过脚本将计算绑定直接分配给模板元素,确保在定义计算绑定后初始化相关属性。
示例:
<template is="dom-bind">
<div>
<input value="{{text::input}}">
</div>
<div>[[describe(text)]]</div>
</template>
<script>
(function() {
var template = document.querySelector('template[is="dom-bind"]');
template.describe = function(text) {
if (text) {
return 'You entered "' + text + '", which is ' + text.length + ' characters long.';
} else {
return 'You didn\'t even enter a thing! Shame on you.';
}
};
template.text = '';
})();
</script>
如何在自动绑定模板(即声明为 <template is='dom-bind'>...</template>
的模板)中定义计算绑定?
只需通过脚本将计算绑定直接分配给模板元素,确保在定义计算绑定后初始化相关属性。
示例:
<template is="dom-bind">
<div>
<input value="{{text::input}}">
</div>
<div>[[describe(text)]]</div>
</template>
<script>
(function() {
var template = document.querySelector('template[is="dom-bind"]');
template.describe = function(text) {
if (text) {
return 'You entered "' + text + '", which is ' + text.length + ' characters long.';
} else {
return 'You didn\'t even enter a thing! Shame on you.';
}
};
template.text = '';
})();
</script>