Mobile-first JavaScript template engine
Home Page: http://www.idangero.us/template7/
License: MIT License
JavaScript template engine with syntax similar to Handlebars.
Template7 is the default template engine in Framework7, but also can be used separately.
{{../person}} - так мы поднимемся вверх при выводе
{{#if ../person}} - так мы сделаем проверку на уровне выше
А вот для js_if - нельзя подняться вверх. this - это текущий уровень. Было бы здорово что-то типа такого:
{{#js_if "this.parent.person=='123'"}}
My template context object example:
{
label: "Image Size",
current: "3872x2592",
choices: [
"3872x2592",
"2896x1944",
"1936x1296"
]
}my template:
{{#if choices}}
<select name="{{label}}">
{{#each choices}}
<option value="{{@index}}" {{#js_compare "this == current"}}selected{{/js_compare}} >
{{this}}
</option>
{{/each}}
</select>
{{/if}}I need compare every item in {{#each}} block with variable from parent context (in my case variable current)
I tried:
... no success.
Is it possible?
Thanks for answer :)
How do you achieve efficiently assigning the selected value to a dynamically loaded dropdown select element while looping in Template7?
<script>to view all?if i can put a url target of template page when i use myApp.router.load({template:'templage/list.html',content:{first:'fly',last:'sky'}}),that will be awesome! @nolimits4web
I got an EvalError at
eval.call(this, func).call(this)
on an old ipad
version: ios 6.1.3
error description: this value passed to eval must be the global object from which eval originated
From the template7 site:
It is ultra lightweight (around 1KB minified and gzipped) and blazing fast (up to 2-3 times faster than Handlebars in mobile Safari).
Do you have anything to back up those performance claims, just genuinely curious. Thanks!
Hi
How can I loop through the following object properly.
Here is my JSON before I parse it with JSON.parse();
[{
"id": "1",
"title": "Article Title 1",
"videos": [
{"title":"Video Title 1"},
{"title":"Video Title 2"},
{"title":"Video Title 3"}
]
},
{
"id": "2",
"title": "Article Title 2",
"videos": [
{"title":"Video Title 1"},
{"title":"Video Title 2"},
{"title":"Video Title 3"}
]
}]
I have tried the following but it spits out loads of video titles. It is not looping properly and I can't figure out how to access to sub object loop right. Is it even possible?
{{#each articles}}
<h2>{{this.title}}</h2>
{{#each this.videos}}
<h3>{{this.videos.title}}</h3>
{{/each}}
{{/each}}
It kind of just ends up spitting out every singe sub video in one.
Would really appreciate anyone's help on this.
Cheers
Tried the following:
{{#each array1}}
{{#each array2}}
{{../@key}} // how to access array1 key here?
{{/each}}
{{/each}}
{{#each array1}}
{{#each array2}}
{{@../key}} // how to access array1 key here?
{{/each}}
{{/each}}
but none worked.
Any ideas?
Thanks.
I'm trying a first "getting started" page with Template7 but I'm stuck...
What is wrong with the following code ? I get "'Template7' is undefined" error.
All referred js files are accessible, I get no 404 errors, only 200.
<html>
<head>
<script src="template7.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() {
var template = $("#template").html();
var compiledTemplate = Template7.compile(template); // Error here
jQuery.getJSON("http://api.fixer.io/latest", null, function(data) {
$("#result").html(compiledTemplate(data));
});
});
</script>
</head>
<body>
<div id="result"></div>
<script id="template" type="text/template7">
<p>Base currency: {{base}}</p>
</script>
</body>
We are experiencing issues with this particular block of code in src/template7.js (line 240):
if (part.indexOf('this') === 0) {
variable = part.replace('this', ctx);
}
If I am using a variable with the word "this" at the beginning (i.e. "this_variable" or "thisVariable") the template breaks. I changed the above block to the following and haven't had an issue:
if (part == 'this') {
variable = part.replace('this', ctx);
}
I'm not sure this is the correct solution, I just wanted to let you all know of the issue.
in doc #js_compare be used like :
{{#js_compare "a === b"}}A equals to B{{else}}A not equal to B{{/js_compare}}
i use #js_compare in a {{#each}} like
"{{#js_compare "sales == 1"}}1{{else}}2{{/js_compare}}"
but i get error "sales not defined"
the sales lost it context . in right way like
"{{#js_compare "this.sales == 1"}}1{{else}}2{{/js_compare}}"
popover
<script id="template" type="text/template7">
<p>Hello, my name is {{firstName}} {{lastName}}</p>
</script>
script
var context = {
firstName: 'John',
lastName: 'Doe'
};
$$.get("view/popover.html", {}, function(template) {
console.log(template);
var compiledTemplate = Template7.compile(template);
var html = compiledTemplate(context);
$$('.teste').html(html);
});
It should not work?
Great performance with template7,but I am puzzled with the question in my project:
it happens in the app webview of wechart(http://www.wechat.com/en/)
device:iphone 6.1.3（10B329）
wechart:6.1.1
testUrl:http://www.xudihui.com/template7test.html
{
text: '<script>alert(1)<\/script>'
}Empty string
{
text: '<foo>alert(1)<\/foo>'
}alert(1){
text: '<foo>alert(1)</foo>'
}<foo>alert(1)</foo><foo>alert(1)</foo>For all use-cases!
{
text: '<foo>alert(1)</foo>'
}Error
<foo>alert(1)</foo>Should work like Handlebars
Пример:
{{escape title}}
русские буквы будут в виде "%u0427". Кодировка файлов - UTF-8;
если убрать escape, то все ок.
var template = $$('script#template').html();
console.log(template)
var compiledTemplate = Template7.compile(template);
<script id="template" type="text/template7">
<ul>
{{#each droplets}}
<li>{{id}} {{name}}</li>
{{/each}}
</ul>
</script>
it doesn't work framework7
I can't really explain what's wrong, but an example will probably say enough. Here's a complete fiddle: https://jsfiddle.net/Toverbal/7gc9br80/
Data:
var data = {
level1: {
level2: 'This is level 2!',
},
withwrapper: {
content: 'This is dummy content',
},
};Template (this is just a snippet from the complete fiddle!):
{{#with withwrapper}}
{{#if ../level1}}
<div>This fails: {{ ../level1.level2 }}</div>
{{/if}}
{{/with}}Strange thing is that ../../level1.level2 will give result and if you don't add the #if, the ../level1.level2 actually works.
The registered partial template can't access the @root context:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Template7 bug</title>
</head>
<body>
<div id="template"></div>
<script src="../dist/template7.min.js"></script>
<script>
T7bug = {
context: {
rootvalue: 'this is missing',
items: [
{
content: 'one'
},
{
content: 'two'
},
{
content: 'three'
}
]
},
template: [
'<ul>',
' {{#each items}}',
' {{> partial}}',
' {{/each}}',
'</ul>'
].join(''),
partial: [
'<li>',
' <div>rootvalue: {{@root.rootvalue}}',
' <div>{{content}}</div>',
' </div>',
'</li>'
].join('')
};
Template7.registerPartial('partial', T7bug.partial);
var template = Template7.compile(T7bug.template);
var html = template(T7bug.context);
document.getElementById('template').innerHTML = html;
</script>
</body>
</html>In the example above the @root.rootvalue is not rendered.
for e.g:
Template7.compile(template, options);
and then:
Template7.compile(template, {
noEscape:true
});
For example below code returns always true (even when selectedMenuID is different than ID):
{{#js_if "@root.selectedMenuID===this.ID"}}
but this version seems works correct (contains space before ===):
{{#js_if "@root.selectedMenuID ===this.ID"}}
this is inconsistent in comparison to other js_if expression, for example this works correct without space:
{{#js_if "123456===this.ID"}}
Hi,
It would be nice to be able render a partial using a variable as helpernmae.
Currently helper doesn't make difference between "partialname" or partialname (without double quotes).
What I mean is considering following partials names:
And a variable called type that can contains "text", "textarea" or "select"
I would like to be able to achieve the following
{{> type}}
And so partial helper should resolve properly name.
Regards
tag conflict with backend language
for example : phalcon volt template engine
This doesn't work:
{{js "this.str.replace(/^image/, '') "}}
This works:
{{js "this.str.replace(/image/, '') "}}
{{#each datalist}}
<tr>
<td>{{Number}}</td>
</tr>
{{/each}}
views error
---------------------------------Magic split line---------------------------------
{{#each datalist}}
<ul>
<li>{{Number}}</li>
</ul>
{{/each}}
views ok
i got an error when compiling e.g.
´´´
{{ emails.all }}
´´´
note the spaces!
by deleting the spaces {{emails.all}} i got the correct template/output/no error.
I could live with that but i think the parsing should be more graceful in this case.
It would be great if you could add "module.export" 👍
if (block.contextName.length > 0) {
throw new Error('Template7: Missing helper: "' + block.helperName + '"');
}
if request contextName length lt 0 while this param is unless
Links to the images in your demo are broken. Server not found error.
All of the variables in the example should be prefixed with 'this.', even says so in the caption below.
Also the caption contains a typo. It says 'Nore' instad of 'Note'
Minor stuff really.
Hello @nolimits4web,
could you please add a new build in helper to define context variables.
Thanks :)
Hello,
Can I use a test function as context for #unless helper. I have read in source that a test on context is made at the top of the function but I can make it work.
{{#unless function(){ return var === "test";} }}
...
{{/unless}}
maybe it could be easier to do something like that :
{{#unless (var === test) }}
...
{{/unless}}
Regards
I could't get variable in parent context by passing ../Variable when using in block expressions. This feature was working till v1.1.4 release. After upgrading to v.1.2.3 it is not working.
Template7
{{#each children}}
{{#each grandChildren}}
grandFatherName: {{../../firstName}} | fatherName: {{../name}} | name:{{name}}<br/>
{{/each}}
{{/each}}")
Data
{
firstName: 'Ivan',
children:[
{
name: 'Vasiliy',
age: 35,
grandChildren:[
{name: 'Olga', age: 10},
{name: 'Masha', age: 6}
]
}
]
}Expected:
grandFatherName: Ivan | fatherName: Vasiliy | name: Olga
grandFatherName: Ivan | fatherName: Vasiliy | name: Masha
Output:
grandFatherName: | fatherName: | name: Olga
grandFatherName: | fatherName: | name: Masha
There are no parents variables value.
support "for" loop expression in the form of native javascript inside the template.
Basically I need (having provided an item COUNT) to generate repetitive tamplate chunk.
What are your thoughts on adding the ability to do else if?
Would be nice to enhance this method:
with templateURL
Template7.registerPartial(name, templateURL)
where templateURL is a template.html file, which includes the template.
It is not good maintainable to have html-strings in javascript..
The regular version on f7 allows this.
how to set this condition with {{#js_compare "@root.title == about"}}
Hello @nolimits4web,
How can I access the "@key" inside of the "inArray" helper?
{{#each manyItems}}
{{#inArray 'something' this.itemName}}
{{../@key}} <!-- This works -->
{{../@index}} <!-- This works, too -->
{{@root.someItems[../@key].id}} <!-- This doesn't work. How to access the ../@key here? -->
{{/inArray}}
{{/each}}
Hope you can help me ;)
Great work on Template7, can you add the ability to get item by index e.g:
{{clients.1.name}} or {{clients.[1].name}}
It would be cool if you could. Thanks.
{{#js_compare "this.status_auth > 1"}}
{{/js_compare}}
In ios6 cause the whole page can not be rendered
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.
Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.
Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.
Will you publish Template7 standalone library in bower ?
I am waiting for it in Framework7 0.9.6 but now I have to use this repository manually.
Hey,
is it possible to format variables before they get rendered? I want to convert "pubDate" in RSS Feeds into DAY. MONTH YEAR (e.g. 16. January 2015) scheme?
<div class="page-content">
<img data-src="path/to/image.jpg" class="lazy">
</div>
please refrer:framework7-lazy-load
thank you
Trying to compile with a property that has a space in the name like this:
Template7.compile('{{text test}}')({'text test':'hello'});
But that produces: Error: Template7: Missing helper: "text"
What syntax can correctly compile this?
Hi,
Are you at all interested in tests for Template7 or do you think it is not useful to have them?
Im asking because i chose T7 as my learning project for testing in mocha+chai+karma, would you like me to create PR after i finish? Im not saying it will be perfect, but certainly it would be better than nothing.
Regards,
Paweł
I am using Framework7 together with the baked in Template7. In my html, I have included the meta tag to include Content-Security-Policy.
Expected Behavior
Should work with CSP?
Actual Behavior
'Uncaught EvalError: Refused to evaluate a string as Javascript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'"
at eval()
at o (framework7.js:13994)
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.