首先,HTML是一个节点树.这不仅仅是一个文本.
但是,大多数模板引擎处理它们的输入和输出,因为它只是一个文本; 他们不关心他们的标签,他们{$foo}的标签和周围发生了什么<% bar() %>; 他们也不关心他们输出什么.有时它们碰巧产生了正确的html,但这只是巧合; 他们没有达到目的,他们想要的只是用他们的评价来取代文本流中的一些有趣的标记.
有一些模板引擎会将其输出视为一组节点; 想到XSLT和Haml.对于某些任务,这具有优势:例如,您可以自动重新格式化(例如,删除所有空文本节点;自动缩进;自动换行).除非您使用可以破坏该操作的严格操作子集,否则结果将保证为正确的xml/sgml.此外,这样的模板引擎会在文本节点和属性中自动引用字符串,因为它严格知道您是在编写属性还是文本节点.此外,它可以有条件地从输出中删除节点,因为它知道它的开始和结束位置,这很有用,并且可以执行其他非平凡的节点操作.
你可能不喜欢它的verbosiness或functionalness XSLT,但它的该死的帮助,你的模板是xmllint,能够XML,你的输出是一个很好的SGML/XML.
所以问题是:您知道哪些模板引擎将其输出视为一组正确的节点,而不仅仅是非结构化文本？我知道XSLT,Haml和一些基于python的晦涩的.Moar!
我一直在尝试Twig,它适用于我的小网站.
这是使用的教程:
http://devzone.zend.com/article/13633
但是,我已经在网上看了一下,找不到任何可以分页的东西.
这是我的代码:
<html>
<head>
<style type="text/css">
table {
border-collapse: collapse;
}
tr.heading {
font-weight: bolder;
}
td {
border: 0.5px solid black;
padding: 0 0.5em;
}
</style>
</head>
<body>
<h2>Automobiles</h2>
<table>
<tr class="heading">
<td>Vehicle</td>
<td>Model</td>
<td>Price</td>
</tr>
{% for d in data %}
<tr>
<td>{{ d.manufacturer|escape }}</td>
<td>{{ d.model|escape }}</td>
<td>{{ d.price|raw }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
这是它的PHP编码:
<?php
// include and register Twig auto-loader
include 'Twig/Autoloader.php';
Twig_Autoloader::register();
// attempt a connection
try { …在knockoutjs 1.2.1我能做到:
<div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/>
<script id='Bar'>
{{if $item.fooMode}} FOO! {{/if}}
</script>
我试图将其翻译为1.3.0beta
<div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/>
<script id='Bar'>
<span data-bind="if: $item.fooMode">FOO!</span>
</script>
但新的本机模板引擎不尊重templateOptions.
还有其他方法可以将任意数据传递到模板中吗？
我目前正在阅读"Javascript Web Applications"(O'Reilly,Alex MacCaw),很早就有一段代码片段可能会在HTML文档中执行JS函数,但它没有被<script>标签包围:
// template.html
<div>
<script>
function doSomething(aParam) {
/* do stuff ... */
};
</script>
${ doSomething(this.someX) }
</div>
请有人可以解释一下美元符号 - 大括号的符号吗？我目前正在学习JS而且我以前没有见过这个,所以我假设它是JS代码执行的简写(如果是这样,为什么没有终止的分号？),或者也许是一些专有的模板标记(Ruby) ？PHP？),还是完全不同的东西？
非常感谢.
UPDATE
后来在第5章(上述书中)中我们将介绍Javascript模板.作者似乎认为读者在阅读本书之前已经遇到过这种模板技术.正如Stackoverflow成员Esailija所指出的,这本书不是 Javascript的初学者指南; 我应该补充一点,我正在阅读这本书与"Javascript:The Good Parts"(O'Reilly,Douglas Crockford)等人并行阅读.
我有一半怀疑某种模板,但我没有考虑纯粹的JS模板.我过去使用过PHP和RoR框架,它们也使用类似的模板概念将模型数据注入到视图中.
最后一点:我阅读"Javascript Web应用程序"的原因是它讨论了JS领域中的模型 - 视图 - 控制器(MVC)模式.虽然它主张使用jQuery库(以及其他)来增强和加速开发,但它不是jQuery API书籍或者是另一个新的javascript包装器; 相反,本书利用这些库(在适当的情况下)来处理跨浏览器的JS不一致性,同时在创建"Web应用程序"时推动实际的JS最佳实践和模式.
我正在尝试创建一个超级简单的JavaScript模板解决方案.我想使用JavaScript replace方法在模板中查找大括号的所有实例,并用适当的数据替换它们.
例如,如果我的模板是: <p>My name is {{name}}. I am {{age}}.</p>
我想要的结果是: <p>My name is Olly. I am 19.</p>
到目前为止,这是我的代码:http://jsfiddle.net/2RkAG/
我试图让它自动替换每一段数据,所以我不必明确告诉JavaScript要替换什么.但是,这是我遇到问题的地方.
angularJS是否有任何基于ng-controller名称空间的外部JS/CSS文件延迟加载？以便以下将com.myApp.SomeClass.js和com.myApp.SomeClass.css附加到文档头？
<div ng-controller="com.myApp.SomeClass"></div>
javascript model-view-controller jquery templating angularjs
该文档告诉我们通过将关键字添加mixin到实际的mixin 来调用mixin.
.bar
mixin foo(arguments)
但是在不同的地方,我看到人们通过添加一个加号(+)来调用mixin,例如:
.bar
+foo(arguments)
有人可以解释一下差异,因为文档似乎没有显示出来.我尝试了两个例子,两者似乎都有用.
是否+只是一个速记？
在jade中,管道符号(|)用于纯文本输出.如果我想在页面中写它怎么办？我该怎么逃避呢？
我一直在努力解决这个问题，我试图呈现一个EJS文件并将结果保存为HTML，保存部分似乎正在工作，但是我无法完全理解如何从“模板”文件。
var fileName = 'public/cv/' + userID + '_default.html';
var stream = fs.createWriteStream(fileName);
function buildHtml(request) {
var sveducations = JSON.parse(SQReducations);
var header = '';
return '<!DOCTYPE html>'
+ '<html><header>' + header + '</header><body>' +
html
+
'</body></html>';
};
stream.once('open', function (fd) {
var html = buildHtml();
stream.end(html);
});
我正在开发一个有很多共享元素的项目,例如页脚,标题,导航等.我在我的视图中扩展了几个布局.现在,我正在我的视图中加载共享元素,但是我需要提供我正在加载它的视图中的每个共享元素所需的所有资源(依赖项).我希望能够跳过这一步并加载实际准备使用的元素(所以我不需要记住所有依赖的javascript和css文件,因为它们中的一些可能有一些) .
我正在考虑在元素视图中指定共享元素所需的所有资源,所以当我包含我需要的元素时,它会"自动"加载资源,而不是在我的视图中指定所有这些资源.所以我的问题是,是否有可能做到这一点或者什么是正确的方法来实现这一目标？
希望使用代码更好地解释:
结构体:
views/
- /layout/
-> layout.twig
- /homepage/
-> index.twig
- /shared/
-> navigation.twig
布局:
<!-- HTML headers, etc. -->
{% block assets %}
<link rel="stylesheet" href="xxx" />
{% endblock %}
{% block content %}
{% endblock %}
视图:
{% extends "layout/layout.twig" %}
{% block assets %}
{{ parent() }}
<!-- some assets for view -->
{% endblock %}
{% block content %}
{% include "shared/navigation.twig" %}
<!-- content -->
{% endblock %}
共享元素navigation.twig:
// It's …templating ×10
javascript ×6
node.js ×3
html ×2
php ×2
pug ×2
twig ×2
angularjs ×1
assets ×1
curly-braces ×1
dollar-sign ×1
ejs ×1
jquery ×1
keyword ×1
knockout.js ×1
mixins ×1
pagination ×1
replace ×1