mirror of
https://github.com/bobwen-dev/react-templates
synced 2025-04-12 00:56:39 +02:00
convert 'template' tag to 'rt-template'
This commit is contained in:
parent
78d653a538
commit
4ee34d21ae
@ -363,16 +363,16 @@ export default function () {
|
||||
|
||||
## properties template functions
|
||||
In cases you'd like to use a property that accepts a function and return renderable React component.
|
||||
You should use a **template** tag that will let you do exactly that: `<template prop="propName" arguments="arg1, arg2"/>`.
|
||||
You should use a **rt-template** tag that will let you do exactly that: `<rt-template prop="propName" arguments="arg1, arg2"/>`.
|
||||
|
||||
Templates can be used only as an immediate child of the component that it will be used in. All scope variable will be available in the template function.
|
||||
|
||||
###### Sample:
|
||||
```html
|
||||
<MyComp data="{[1,2,3]}">
|
||||
<template prop="renderItem" arguments="item">
|
||||
<rt-template prop="renderItem" arguments="item">
|
||||
<div>{item}</div>
|
||||
</template>
|
||||
</rt-template>
|
||||
</MyComp>
|
||||
```
|
||||
###### Compiled (AMD):
|
||||
|
@ -53,6 +53,7 @@ var classSetAttr = 'rt-class';
|
||||
var classAttr = 'class';
|
||||
var scopeAttr = 'rt-scope';
|
||||
var propsAttr = 'rt-props';
|
||||
var templateNode = 'rt-template';
|
||||
|
||||
var defaultOptions = {modules: 'amd', version: false, force: false, format: 'stylish', targetVersion: '0.13.1', reactImportPath: 'react/addons', lodashImportPath: 'lodash'};
|
||||
|
||||
@ -184,11 +185,15 @@ function generateTemplateProps(node, context) {
|
||||
var propertiesTemplates = _(node.children)
|
||||
.map(function (child, index) {
|
||||
var templateProp = null;
|
||||
if (child.name === 'template' && child.attribs.prop) { // Generic explicit template tag
|
||||
if (child.name === templateNode) { // Generic explicit template tag
|
||||
if (!_.has(child.attribs, 'prop')) {
|
||||
throw RTCodeError.build('rt-template must have a prop attribute', context, child);
|
||||
}
|
||||
|
||||
var childTemplate = _.find(context.options.templates, {prop: child.attribs.prop}) || {arguments: []};
|
||||
templateProp = {
|
||||
prop: child.attribs.prop,
|
||||
arguments: child.attribs.arguments ? child.attribs.arguments.split(',') : childTemplate.arguments
|
||||
arguments: (child.attribs.arguments ? child.attribs.arguments.split(',') : childTemplate.arguments) || []
|
||||
};
|
||||
} else if (propTemplateDefinition && propTemplateDefinition[child.name]) { // Implicit child template from configuration
|
||||
templateProp = {
|
||||
|
@ -1,5 +1,5 @@
|
||||
<div>
|
||||
<template prop="templateProp" arguments="arg1">
|
||||
<rt-template prop="templateProp" arguments="arg1">
|
||||
<div>{arg1}</div>
|
||||
</template>
|
||||
</rt-template>
|
||||
</div>
|
@ -1,5 +1,5 @@
|
||||
<div rt-scope="'boten' as name">
|
||||
<template prop="templateProp" arguments="arg1">
|
||||
<rt-template prop="templateProp" arguments="arg1">
|
||||
<div>Name: {name} {arg1}</div>
|
||||
</template>
|
||||
</rt-template>
|
||||
</div>
|
@ -1,10 +1,10 @@
|
||||
<div>
|
||||
<template prop="templateProp" arguments="arg1">
|
||||
<rt-template prop="templateProp" arguments="arg1">
|
||||
<div>
|
||||
<template prop="templateProp2" arguments="inner1, inner2">
|
||||
<rt-template prop="templateProp2" arguments="inner1, inner2">
|
||||
<div>{arg1 + inner1 + inner2}</div>
|
||||
</template>
|
||||
</rt-template>
|
||||
<div>{arg1}</div>
|
||||
</div>
|
||||
</template>
|
||||
</rt-template>
|
||||
</div>
|
Loading…
x
Reference in New Issue
Block a user