nolimits4web / template7 Goto Github PK
View Code? Open in Web Editor NEWMobile-first JavaScript template engine
Home Page: http://www.idangero.us/template7/
License: MIT License
Mobile-first JavaScript template engine
Home Page: http://www.idangero.us/template7/
License: MIT License
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
how to set this condition with {{#js_compare "@root.title == about"}}
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
How do you achieve efficiently assigning the selected value to a dynamically loaded dropdown select element while looping in Template7?
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!
🚨 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.
It would be great if you could add "module.export" 👍
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.
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
The regular version on f7 allows this.
Hello @nolimits4web,
could you please add a new build in helper to define context variables.
Thanks :)
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
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"}}
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 :)
tag conflict with backend language
for example : phalcon volt template engine
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.
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.
{{../person}} - так мы поднимемся вверх при выводе
{{#if ../person}} - так мы сделаем проверку на уровне выше
А вот для js_if - нельзя подняться вверх. this - это текущий уровень. Было бы здорово что-то типа такого:
{{#js_if "this.parent.person=='123'"}}
{{#each datalist}}
<tr>
<td>{{Number}}</td>
</tr>
{{/each}}
views error
---------------------------------Magic split line---------------------------------
{{#each datalist}}
<ul>
<li>{{Number}}</li>
</ul>
{{/each}}
views ok
This doesn't work:
{{js "this.str.replace(/^image/, '') "}}
This works:
{{js "this.str.replace(/image/, '') "}}
Links to the images in your demo are broken. Server not found error.
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?
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>
{
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
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.
if (block.contextName.length > 0) {
throw new Error('Template7: Missing helper: "' + block.helperName + '"');
}
if request contextName length lt 0 while this param is unless
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
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 ;)
<script>
to view all?<div class="page-content">
<img data-src="path/to/image.jpg" class="lazy">
</div>
please refrer:framework7-lazy-load
thank you
for e.g:
Template7.compile(template, options);
and then:
Template7.compile(template, {
noEscape:true
});
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.
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?
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.
Пример:
{{escape title}}
русские буквы будут в виде "%u0427". Кодировка файлов - UTF-8;
если убрать escape, то все ок.
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.
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)
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
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.
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}}"
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?
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
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..
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.
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.