我正在使用jQuery模板插件,不知道如何获取项目索引:http: //api.jquery.com/category/plugins/templates/
这是我的代码:
<script id="optionTmpl" type="text/x-jquery-tmpl">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
{{each Answers}}
<tr>
<th><input type="radio" name="group1" value="${this.AnswerID}" /></th>
<td>${this.AnswerText}</td><!-- add number in this line--->
</tr>
{{/each}}
</table>
</script>
我想以下面的格式显示答案
1)回答1,2)回答2,3)回答3
要么
a)答案1,b)答案2,c)答案3
我该怎么办？
我可能要求太多,但我正在尝试使用ie8中的html5元素获取jQuery模板.我正在使用head.js以便注册html5元素,我也试过html5shiv但没有运气.页面中还有其他html5元素可以正常工作,但如果我在模板中使用html5元素,则jquery模板系统不返回任何内容.
这是我的一个模板的示例:
<aside>
<script id="sidebar-template" type="text/x-jquery-tmpl">
<section>
<header>${name}</header>
<section>
{{each links}}
<a href="${link}" class="${icon}">${name}</a>
{{/each}}
</section>
</section>
</script>
</aside>
如果我将html5元素更改为divs,那么模板将在ie8中运行.我应该注意到这个模板适用于所有其他浏览器,没有什么大惊喜......
我把一个jsfiddle放在一起演示我的模板:http://jsfiddle.net/keegan3d/E6EbG/1/
反正有没有让这些html5元素在ie8中运行？
我很难确定传入jquery模板的数据是否存在,并且在没有出错的情况下为false.这是我用来测试的
<html>
<head>
<title>jQuery Templates {{if}} logic</title>
</head>
<body>
<p id="results"></p>
<p>How do you test if the Value exists and is false?</p>
<script id="testTemplate" type="text/html">
Test ${Test}:
{{if Value}}
Value exists and is true
{{else}}
Value doesn't exist or is false
{{/if}}
<br/>
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tmpl.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#testTemplate").tmpl({Test:1}).appendTo("#results");
$("#testTemplate").tmpl({Test:2, Value:true}).appendTo("#results");
$("#testTemplate").tmpl({Test:3, Value:false}).appendTo("#results");
});
</script>
</body></html>
有谁知道怎么做？
特定
<div id="place_holder" />
<script id="template" type="text/x-jquery-tmpl">
WHAT DO I PUT HERE
</script>
var array_of_ints = [1,2,3]
$( "#template" )
.tmpl( array_of_ints )
.appendTo( "#place_holder" );
我可以在模板中添加什么？
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
我正在考虑在我的项目中开始使用jQuery模板引擎.
这两个有什么区别？此外,现在是开始使用tmpl的好时机,因为它还处于测试阶段吗？
我已经看到了这个问题,并且使用它的方法会在JS控制台上引发错误Uncaught SyntaxError: Unexpected token ).
我试图采用一个递归的类别数组,它具有一个类别数组的Children属性,并使用jquery模板构建它们.我尝试过的每种方法都会导致语法错误.我已经验证了该对象在javascript中正确显示(它来自MVC3,@Html.Raw(Json.Encode(Model.Categories))用于将其放入JS数组中).这是原始的csharp类
public class CategoryTreeModel
{
public int Id { get; set; }
public string Name{ get; set; }
public bool Selected { get; set; }
public bool HasChildren { get { return Children.Count > 0; } }
public List<CategoryTreeModel> Children { get; set; }
}
这个调用模板第一级的原始html:
<ul class="nav" data-bind="template: {name: 'categories_template', foreach: categories}">
</ul>
和模板本身:
<script type="text/html" id="categories_template">
<li id="category_${Id}" class="category_header">${Name}
{{if $data.HasChildren }}
<ul data-bind='template: { …我们在这里有一个使用Wufoo表单和Wufoo jQuery API的站点.
我们从API中提取数据,对其进行排序,然后在页面上显示.当我们提交的数字高于当前前10名时,它应该在右侧实时更新,因为表单会重定向回自身.它这样做,但不是在IE中.相反,在提交表单和显示新数据之间似乎存在不必要的延迟.关闭浏览器并重新打开页面似乎有效,但这没有用.
这是我们正在使用的jQuery:
<script>
$.wufooAPI.getEntries({
"callback" : processEntries,
"formHash" : "x7x1x7",
"sortID" : "Field3",
"sortDirection" : "DESC",
});
function processEntries(data) {
$.each(data.Entries.slice(0, 10), function(entriesIndex, entriesObject) {
// Make sure this entry has all the required bits
if (entriesObject.Field1 && entriesObject.Field3) {
$("#attendeeTemplate").tmpl(entriesObject).appendTo("#people ul");
}
});
};
</script>
这是模板代码:
<script id="attendeeTemplate" type="text/x-jquery-tmpl">
<li>
<h4>${Field1}</h4>
${Field3} minutes
</li>
</script>
它在除IE8和9之外的所有浏览器中都能很好地工作,当它看起来像是在缓存数据而不是从服务器提取请求时.
有没有办法停止在IE中缓存jQuery？
我正在阅读并尝试理解Jquery模板示例.
<script id="movieTemplate" type="text/x-jquery-tmpl">
{{tmpl "titleTemplate"}}
<tr class="detail"><td>Director: ${Director}</td></tr>
</script>
<table><tbody id="movieList"></tbody></table>
<script>
var movies = [
{ Name: "The Red Violin", Director: "François Girard" ,Producer : "ssss" },
{ Name: "Eyes Wide Shut", Director: "Stanley Kubrick" },
{ Name: "The Inheritance", Director: "Mauro Bolognini" }
];
/* Convert the markup string into a named template,
referenced by the {{tmpl}} tag */
$.template( "titleTemplate", "<tr class='title'><td>${Name}</td></tr>" );
/* Render the movies data, using the named template as a nested template …所有JS模板引擎都建议将模板文本放在脚本块中,如下所示:
<script id="peopleTemplate" type="text/template">
{#people}
<div class="person">Name: {firstName} {lastName}</div>
{/people}
</script>
但许多开发人员(可以理解)不喜欢这个,因为他们在脚本块内的代码编辑器中丢失了HTML语法高亮.我已经看到了这样的解决方法:在<script>"text/html"模板中保持正确的HTML语法突出显示 .这个问题不是要求解决方法.
我知道一个危险是Web浏览器会尝试修复无效的HTML,因此调用$('#peopleTemplate').html()将产生不可预测的结果.然而,在我的头脑中,我想不出任何例子来说明这一点.
用div替换脚本标记有哪些其他危险？
奖励:有人能想出一个很好的小提琴,说明浏览器HTML自动修复？
template-engine mustache jquery-templates handlebars.js dust.js
我试图将一个普通的旧html表转换为jqGrid.旧表有一个包含标签的列,这些标签使用无序列表和列表项构建.
这是前面表格的一个例子(jsfiddle)和之后的jqGrid.
在这个例子中,我使用自定义格式化程序,它使用jQuery模板构建DOM元素,然后格式化程序从结果DOM元素返回$ .html().
function getTagCellContents(cellvalue) {
var domitems=$("#jqgrid-tag-list-item").tmpl({tags: callvalue});
return domitems.html();
}
我遇到的问题是生成的html中包含的空格导致行太高.这也导致单元格上的"标题"属性笨拙.
jqGrid是否提供了一个API,用于将DOM对象直接插入到单元格中,而不是从自定义格式化程序返回文本？将自定义html放入jqGrid单元格的最佳做法是什么？
jquery-templates ×10
jquery ×8
javascript ×3
cell ×1
dust.js ×1
html5 ×1
jqgrid ×1
knockout.js ×1
mustache ×1
templates ×1
wufoo ×1