标签: jquery-templates

所以我想 <br/> 如果值是数组，否则只显示值。我想我可以编写一个函数来做到这一点，但想知道是否有更好的方法来使用 jquery 模板来做到这一点？

<script id="template" type="x-jquery-tmpl"> <table>
  <tr>
    <td>${name}</td>
    <td>{{each value}}${$value}<br/>{{/each}}</td>
  </tr> </table>
</script>

<script>
      var data = [
                    {
                        name: "blah",
                        value: ["1", "2", "3"]
                    },
                    {
                        name: "blah blah",
                        value : "abc"
                    }
                ];

$('#template').tmpl(data).appendTo('#target);
    </script>

<div id="target">

</div>

我正在使用像这样的jQuery模板:

<script type="text/html" id="ListTemplate">
{{if (parseInt($.attachment_count) > 0) }}
    XXXX
{{else}}
    ${attachment_count}
{{/if}}

</script>

但这不起作用？if块永远不会返回true.有什么建议？谢谢

我正在尝试构建一个简单的jQuery UI模板,并使用存储在localStorage中的数据填充它.

我需要使用guest虚拟机列表设置本地存储,并让用户编辑列表.单击更新时,更改将发送回服务器.

<ul id="guests">
 <li>
  Name: ${name} <br />
  Phone: ${phone} <br />
  Email: ${email}
 </li>
</ul>

我真的很陌生,不知道该怎么做.我只对页面加载和填充模板时设置本地存储感兴趣.

有人可以提供一个简短的教程吗？

我认为这是一个简单的问题......有人可以告诉我,以防它根本不可能吗？谢谢!

我有一个页面,其中从XHR响应加载搜索结果.在这种情况下使用jQuery模板显示搜索结果有什么好处,而不是使用更常规的.html()或.load()方法？

我在数据对象中有73个项目,我想创建每页最多12个项目的页面视图,我已经尝试使用jquery模板逻辑来确定何时关闭并打开一个新页面div.原谅任何语法或逻辑错误,我很快就从内存中重写了这个错误.

<script id="listTmpl" type="text/x-jquery-tmpl">

{{if idx == 0}}
    <div class="page">
{{/if}}

        <div class="item mrl">
            <a href="">
                <img src="http://files.stv.tv/img/player/${programmeName}/episodes/${episodeName}-230.jpg" alt="${programmeNiceName}" />
                <h3 class="mln mvs">${programmeNiceName}</h3>
                <p>${idx}</p>
            </a>        
        </div>

{{if idx % 12 == 0}}
    </div>
    <div class="page">
{{/if}}

{{if idx == ($item.getTotal() - 1)}}
    </div>
{{/if}}

</script> 

不幸的是在chrome中我得到以下错误.

未捕获的TypeError:无法调用未定义的方法'push'

我的假设是,在每个项目的某些迭代中,生成的html无效,这会引发错误,任何人都可以建议更好的做事方式或我可能出错的地方.

我目前有一些问题,我有一个Cufon/Validation设置方法,需要在加载模板时调用.由于某些原因,在模板加载完成之前似乎并不总是正确激活(当前在documentReady中调用设置).

有没有办法做类似的事情:

template: { name: "myTemplate", loaded: someCallback }

我在文档中没有看到任何关于此的内容,但我不确定是否有一些最佳实践可以支持这一功能.

我有一个简单的foreach模板,在每个元素里面我想要一个ActionLink,但ActionLink需要发送一个Id来编辑元素.

要模板化的项目:

<div data-bind="template: {
                    name: 'postsTemplate',
                    foreach: posts
                    }">
</div>

模板:

<script id="postsTemplate" type="text/html">
<h2 data-bind="text: Title"></h2>

<p class="post-info">
    <p class="post-info" data-bind="text UserName"></p>
    <span data-bind="Body"></span>
    <p class="post-footer">
        @Html.ActionLink("Comments", "IndividualPost", "Post", null, null, "comments", new {id = })
    </p>
</p>
</script>

如何Id通过ActionLink 发送实际帖子？我的意思是,如何在不使用数据绑定的情况下访问帖子的ID？(因为它是帮助者).

我有一个简单的模板,我正在使用插件(Jquery.tmpl()),我想简单地传入一个字符串数组并设置我的模板来显示这些字符串.我已经使用了这些大量传入对象但是如果你没有传入一个对象而只是传入一个字符串,我似乎无法找到或弄清楚语法.

例:

var years = { 2011, 2012, 2013}

$.tmpl('blah', years).appendTo("#somediv");

$.template('blah', <div>(this is where I want the string value)</div>

那么我需要在模板中添加什么语法.

我正在尝试将我的标记缓存到$ .template中.在其中,我想添加一个条件,其中,如果变量为空,则输出会反映出来.

这是我尝试的片段.当我运行它时,事件类型是正确的或空白."(没有版主列出)"永远不会出现.

我究竟做错了什么？

var markup = '<div class="new_line general_heading">' +
                 '{{if EventType != ""}}' +
                     '${$EventType}' +
                 '{{else}}' +
                     '(No Moderators Listed)' +
                 '{{/if}}' +
             '</div>' +
             '<div class="gray_rule allclear"></div>';

我试图从嵌套模板访问父数据.

根据这个https://github.com/BorisMoore/jsrender/issues/34,我试图做类似的事情,但我得到错误:data.parent未定义.

在我的"主"模板中,我有声明

{{for Rooms  tmpl="#RoomTmpl" layout=true /}}

并在#RoomTmpl中

 <script id="RoomTmpl" type="text/x-jsrender">
     {{:parent.data.Room1Label}}
     {{for #data}}
         {{:RoomName}}
     {{/for}}
 </script>

我尝试了各种组合但总是出错

 {{:parent.parent.data.Room1Label}}
 {{:#data.parent.parent.data.Room1Label}}
 {{:#data.parent.data.Room1Label}}
 {{:#data.parent.Room1Label}}

有谁知道怎么做？

- 解决方案 -

正确的synatx是

#parent.parent.data.Room1Label

如何使用jQuery模板选择选项？

假设我的数据是: { "color" : "red" }

我有 :

<select>
  <option>blue</option>
  <option>green</option>
  <option>red</option>
</select>

我希望红色是默认选择的那个.我怎样才能做到这一点？

谢谢.

我有一些动态数据加载到名为"tabNames"的数组中,如下所示:

    tabNames.push({name: hit.category});

然后我需要列出以下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>

我从js文件调用jsrender,其中编写函数用于将内容加载到"tabNames"数组中,如下所示:

    $("#categories").html($("#categoriesList").render(tabNames));

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