http://jsfiddle.net/tQnVt/621/
这个小提琴说明了我的问题.
假设我在jsrender模板的帮助下将JSON绑定到视图上.
var vm = {
foo: {color: "red",otherObjectToMatch:"object"},
testData: [{color: "red"}, {color: "yellow"}, {color: "blue"}]
};
Run Code Online (Sandbox Code Playgroud)
对象vm有2个属性 - 1)普通对象2)对象数组.
模板-
<script id="template" type="text/x-jsrender">
<p>
{{:foo.color}}
</p>
<ul>
{{for testData}}
<li>index: {{>color}}</li>
{{/for}}
</ul>
</script>
Run Code Online (Sandbox Code Playgroud)
我想从普通对象#1的属性匹配,如果它的属性颜色与循环中的属性匹配,那么将应用一些类.
我试过了-
<p>
{{:foo.color}}
</p>
<ul>
{{for testData}}
{{if foo.color=={{>color}} }}
<li class='match'>index: {{>color}}</li>
{{else}}
<li>index: {{>color}}</li>
{{/if}}
{{/for}}
</ul>
Run Code Online (Sandbox Code Playgroud)
这是一次失败的尝试.我找不到如何匹配jsrender中的其他对象.
我是 jsrender 的新手。我已经为一个带有脚本标记的自定义树视图编写了模板,请参见上面:
<script id="jstemplate" type="text/x-jsrender">
{{if IsFolder}}{{include tmpl="#jsfoldertemplate"/}}{{else}}{{include tmpl="#jsfiletemplate"/}}{{/if}}
</script>
<script id="jsfoldertemplate" type="text/x-jsrender">
<li data-jstree='{"type":"{{:ClassName}}"}' data-fold="{{:IsFolder}}" data-path="{{:RP}}">{{:Nom}} <span style="font-size:smaller">({{:Size}} {{:NbFiles}} fichier(s)) <span>{{:Lock}}</span></span>
<ul>
{{for children tmpl="#jstemplate"/}}
</ul>
</li>
</script>
<script id="jsfiletemplate" type="text/x-jsrender">
<li data-jstree='{"type":"{{:ClassName}}"}' data-fold="{{:IsFolder}}" data-path="{{:RP}}">
<span {{:InspectorInfo}} class="SpanEtat {{:Inspector}}"></span>
<span class="ui-link" onclick="$get('<%=Me.ClientID%>').FileSelected('{{:RP}}','{{:Nom}}');" style="vertical-align:middle">{{:Nom}}</span>
<span style="font-size:smaller">({{:Size}} {{:LastModif}}) <span>{{:Lock}}</span></span>
</li>
</script>
Run Code Online (Sandbox Code Playgroud)
在我的 js 代码中:
$(#MyDiv').html('<ul>' + $('#jstemplate').render(NO.Nodes) + '</ul>');
Run Code Online (Sandbox Code Playgroud)
没问题
现在我想把这个模板放在一个字符串中(用于编写 jqm 小部件),但我对子模板变得疯狂......
我尝试了很多解决方案但没有任何效果......
如果有人有任何想法......?
谢谢
我有一些动态数据加载到名为"tabNames"的数组中,如下所示:
tabNames.push({name: hit.category});
Run Code Online (Sandbox Code Playgroud)
然后我需要列出以下html中的"名称"字段.我想在数组"tabNames"中水平列出前7个"name"值,然后将其他值列入下拉列表中.
这是我的HTML
<div id="categories" class="food-category-tab">
<script id="categoriesList" type="text/x-jsrender">
<ul id="myTab" class="nav nav-tabs">
{{if #index <=6}}
<li class="active"><a href="#home" data-toggle="tab">{{>name}} </a></li>
{{/if}}
{{if #index >6}}
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#dropdown1" data-toggle="tab">{{>name}}</a></li>
</ul>
</li>
{{/if}}
</ul>
</script>
</div>
Run Code Online (Sandbox Code Playgroud)
我从js文件调用jsrender,其中编写函数用于将内容加载到"tabNames"数组中,如下所示:
$("#categories").html($("#categoriesList").render(tabNames));
Run Code Online (Sandbox Code Playgroud)
任何人都可以告诉代码有什么问题以及如何解决这个问题?