bobwen-dev/react-templates
1
0
Fork 0
mirror of https://github.com/bobwen-dev/react-templates synced 2025-04-12 00:56:39 +02:00
Code Issues Releases Wiki Activity

fix the new "properties template functions" section

Browse Source
This commit is contained in:
Nir Natan 2015-08-10 00:05:19 +03:00
parent a0bedecc0d
commit ddb0a7f208
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -362,13 +362,16 @@ export default function () {
``` ```
## properties template functions ## properties template functions
In cases you'd like to use a property that accepts a function and return renderable React component. Using of a **template** tag lets you do exactly that: `<template prop="propName" arguments="arg1, arg2"/>`. templates can be used only as an immediate child of the component that it will be used in. 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"/>`.
Templates can be used only as an immediate child of the component that it will be used in and all scope variable will be available in the template function.
###### Sample: ###### Sample:
```html ```html
<MyComp data="{[1,2,3]}"> <MyComp data="{[1,2,3]}">
<template prop="renderItem" arguments="item"> <template prop="renderItem" arguments="item">
<div>{utils.toLower(item.name)}</div> <div>{item}</div>
</template> </template>
</MyComp> </MyComp>
``` ```
@ -380,7 +383,7 @@ define([
], function (React, _) { ], function (React, _) {
'use strict'; 'use strict';
function renderItem1(item) { function renderItem1(item) {
return React.createElement('div', {}, utils.toLower(item.name)); return React.createElement('div', {}, item);
} }
return function () { return function () {
return React.createElement(MyComp, { return React.createElement(MyComp, {
@ -400,7 +403,7 @@ define([
var React = require('react/addons'); var React = require('react/addons');
var _ = require('lodash'); var _ = require('lodash');
function renderItem1(item) { function renderItem1(item) {
return React.createElement('div', {}, utils.toLower(item.name)); return React.createElement('div', {}, item);
} }
module.exports = function () { module.exports = function () {
return React.createElement(MyComp, { return React.createElement(MyComp, {
@ -419,7 +422,7 @@ module.exports = function () {
import React from 'react/addons'; import React from 'react/addons';
import _ from 'lodash'; import _ from 'lodash';
function renderItem1(item) { function renderItem1(item) {
return React.createElement('div', {}, utils.toLower(item.name)); return React.createElement('div', {}, item);
} }
export default function () { export default function () {
return React.createElement(MyComp, { return React.createElement(MyComp, {