小编Bor*_*ore的帖子

如何在JsRender嵌套模板中访问父数据属性

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中的其他对象.

javascript jquery json jsrender

4
推荐指数
1
解决办法
2749
查看次数

带有字符串标记的 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}}&nbsp;<span style="font-size:smaller">({{:Size}}&nbsp;{{:NbFiles}}&nbsp;fichier(s))&nbsp<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>&nbsp;
        <span class="ui-link" onclick="$get('<%=Me.ClientID%>').FileSelected('{{:RP}}','{{:Nom}}');" style="vertical-align:middle">{{:Nom}}</span>&nbsp;
        <span style="font-size:smaller">({{:Size}}&nbsp;{{:LastModif}})&nbsp;<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 小部件),但我对子模板变得疯狂......

我尝试了很多解决方案但没有任何效果......

如果有人有任何想法......?

谢谢

jsrender

0
推荐指数
1
解决办法
1525
查看次数

如何在没有迭代的情况下在JsRender中渲染数组?

我有一些动态数据加载到名为"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)

任何人都可以告诉代码有什么问题以及如何解决这个问题?

jquery jquery-plugins jquery-templates jsrender

0
推荐指数
1
解决办法
1112
查看次数