1
0
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:
Nir Natan 2015-08-17 17:39:09 +03:00
parent 78d653a538
commit 4ee34d21ae
5 changed files with 18 additions and 13 deletions

View File

@ -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):

View File

@ -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 = {

View File

@ -1,5 +1,5 @@
<div>
<template prop="templateProp" arguments="arg1">
<rt-template prop="templateProp" arguments="arg1">
<div>{arg1}</div>
</template>
</rt-template>
</div>

View File

@ -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>

View File

@ -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>