读取 Ractive.js 中的计算属性
Reading computed properties in Ractive.js
我正在尝试找出实现此目标的最佳方法。我可能以错误的方式思考它,但这就是我要 "want" 实现的目标:
<div>
{{#if selection}}
<div>There is a selection in Component!</div>
{{/if}}
<Component />
</div>
其中 selection
是我想在外部范围内使用的 Component
中的计算 属性。有什么方法可以引用组件实例的 属性 吗?
例如:
<div>
{{#if foo.selection}}
<div>There is a selection in Component!</div>
{{/if}}
<Component id="foo" />
</div>
或者这是错误的思考方式。我能想到的唯一其他方法是改用事件。
<div>
{{#if selection}}
<div>There is a selection in Component!</div>
{{/if}}
<Component on-selection="select" />
</div>
但这并不优雅,因为它需要额外的代码:
ractive.on("selection", function(e) { this.set("selection", ...); });
从版本 0.8
开始,您 可以 直接将事件映射到数据值(参见 http://jsfiddle.net/0zubyyov/),这样可以很好地将组件内部与父组件分离:
模板:
<script id='template' type='text/ractive'>
{{#if selected}}selected!{{/if}}
<component on-select='set("selected", )'/>
</script>
<script id='component' type='text/ractive'>
<input type='checkbox' on-change='fire("select", event.node.checked)'>
</script>
javascript:
Ractive.components.component = Ractive.extend({
template: '#component',
data: { selected: false }
});
var r = new Ractive({
el: document.body,
template: '#template'
});
使用 0.7
您可以考虑将值传递给保持最新的组件(请参阅 http://jsfiddle.net/gr6d7vs8/)。我在这个关于处理 computed 属性:
<script id='template' type='text/ractive'>
{{#if selected}} selected! {{/if}}
<component selected='{{selected}}'/>
</script>
<script id='component' type='text/ractive'>
<input type='checkbox' checked='{{checked}}'>
</script>
javascript:
Ractive.components.component = Ractive.extend({
template: '#component',
data: { checked: false, allowed: true },
computed: {
isChecked () {
return this.get('checked') && this.get('allowed')
}
},
oninit(){
this.observe('isChecked', isChecked => {
this.set('selected', isChecked);
});
}
});
我正在尝试找出实现此目标的最佳方法。我可能以错误的方式思考它,但这就是我要 "want" 实现的目标:
<div>
{{#if selection}}
<div>There is a selection in Component!</div>
{{/if}}
<Component />
</div>
其中 selection
是我想在外部范围内使用的 Component
中的计算 属性。有什么方法可以引用组件实例的 属性 吗?
例如:
<div>
{{#if foo.selection}}
<div>There is a selection in Component!</div>
{{/if}}
<Component id="foo" />
</div>
或者这是错误的思考方式。我能想到的唯一其他方法是改用事件。
<div>
{{#if selection}}
<div>There is a selection in Component!</div>
{{/if}}
<Component on-selection="select" />
</div>
但这并不优雅,因为它需要额外的代码:
ractive.on("selection", function(e) { this.set("selection", ...); });
从版本 0.8
开始,您 可以 直接将事件映射到数据值(参见 http://jsfiddle.net/0zubyyov/),这样可以很好地将组件内部与父组件分离:
模板:
<script id='template' type='text/ractive'>
{{#if selected}}selected!{{/if}}
<component on-select='set("selected", )'/>
</script>
<script id='component' type='text/ractive'>
<input type='checkbox' on-change='fire("select", event.node.checked)'>
</script>
javascript:
Ractive.components.component = Ractive.extend({
template: '#component',
data: { selected: false }
});
var r = new Ractive({
el: document.body,
template: '#template'
});
使用 0.7
您可以考虑将值传递给保持最新的组件(请参阅 http://jsfiddle.net/gr6d7vs8/)。我在这个关于处理 computed 属性:
<script id='template' type='text/ractive'>
{{#if selected}} selected! {{/if}}
<component selected='{{selected}}'/>
</script>
<script id='component' type='text/ractive'>
<input type='checkbox' checked='{{checked}}'>
</script>
javascript:
Ractive.components.component = Ractive.extend({
template: '#component',
data: { checked: false, allowed: true },
computed: {
isChecked () {
return this.get('checked') && this.get('allowed')
}
},
oninit(){
this.observe('isChecked', isChecked => {
this.set('selected', isChecked);
});
}
});