diff --git a/.gitignore b/.gitignore index caf1810..5c04a5b 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,5 @@ npm-debug.log /target /coverage +### generated code output ### +test/data/*.code.js diff --git a/src/reactTemplates.js b/src/reactTemplates.js index 47557d7..fc9c429 100644 --- a/src/reactTemplates.js +++ b/src/reactTemplates.js @@ -287,11 +287,16 @@ function convertHtmlToReact(node, context) { var data = {name: convertTagNameToConstructor(node.name, context)}; if (node.attribs[scopeProp]) { - data.scopeMapping = {}; data.scopeName = ''; + + // these are variables that were already in scope, unrelated to the ones declared in rt-scope + data.outerScopeMapping = {}; _.each(context.boundParams, function (boundParam) { - data.scopeMapping[boundParam] = boundParam; + data.outerScopeMapping[boundParam] = boundParam; }); + + // these are variables declared in the rt-scope attribute + data.innerScopeMapping = {}; _.each(node.attribs[scopeProp].split(';'), function (scopePart) { var scopeSubParts = scopePart.split(' as '); if (scopeSubParts.length < 2) { @@ -299,10 +304,15 @@ function convertHtmlToReact(node, context) { } var scopeName = scopeSubParts[1].trim(); validateJS(scopeName, node, context); + + // this adds both parameters to the list of parameters passed further down + // the scope chain, as well as variables that are locally bound before any + // function call, as with the ones we generate for rt-scope. stringUtils.addIfMissing(context.boundParams, scopeName); + data.scopeName += stringUtils.capitalize(scopeName); - data.scopeMapping[scopeName] = scopeSubParts[0].trim(); - validateJS(data.scopeMapping[scopeName], node, context); + data.innerScopeMapping[scopeName] = scopeSubParts[0].trim(); + validateJS(data.innerScopeMapping[scopeName], node, context); }); } @@ -357,8 +367,13 @@ function convertHtmlToReact(node, context) { data.body = ifTemplate(data); } if (node.attribs[scopeProp]) { - var generatedFuncName = generateInjectedFunc(context, 'scope' + data.scopeName, 'return ' + data.body, _.keys(data.scopeMapping)); - data.body = generatedFuncName + '.apply(this, [' + _.values(data.scopeMapping).join(',') + '])'; + var scopeVarDeclarations = _.reduce(data.innerScopeMapping, function(acc, rightHandSide, leftHandSide) { + var declaration = "var " + leftHandSide + " = " + rightHandSide + ";" + return acc + declaration; + }, ""); + var functionBody = scopeVarDeclarations + 'return ' + data.body; + var generatedFuncName = generateInjectedFunc(context, 'scope' + data.scopeName, functionBody, _.keys(data.outerScopeMapping)); + data.body = generatedFuncName + '.apply(this, [' + _.values(data.outerScopeMapping).join(',') + '])'; } return data.body; } else if (node.type === 'comment') { diff --git a/test/data/scope-variable-references.rt b/test/data/scope-variable-references.rt new file mode 100644 index 0000000..929caaf --- /dev/null +++ b/test/data/scope-variable-references.rt @@ -0,0 +1,11 @@ +