标签: jquery-templates

我有以下 javascript 对象

var arr = [
    [
        { "id": 1, "name": "one" },
        { "id": 2, "name": "two" },
        { "id": 3, "name": "three" }
    ],
    [
        { "id": 4, "name": "four" },
        { "id": 5, "name": "five" },
        { "id": 6, "name": "six" }
    ],
]

我正在尝试使用jquery 模板来创建以下 HTML

<div class="row">
    <div class="cell">
        <span>1</span> : <span>one</span>
    </div>
    <div class="cell">
        <span>2</span> : <span>two</span>
    </div>
    <div class="cell">
        <span>3</span> : <span>three</span>
    </div>
</div>
<div class="row">
    <div class="cell"> …

我开始使用jQuery模板插件(微软创建的那个),但现在我遇到了这个问题:模板是针对一堆绑定到对象数组的表单; 当我在其中一个表单上更改某些内容时,我希望绑定的对象更新,我无法弄清楚如何自动化它.

这是一个简单的例子(现实生活中的模板和对象要复杂得多):

<!-- Template -->
<script type="text/html" id="tmplTest">
    <input type="text" value="${textvalue}"/>
</script>

<!-- object to bind -->
<script type="text/javascript">
    var obj = [{textvalue : "text1"},{textvalue : "text2"}]

    jQuery("#tmplTest").tmpl(obj)
</script>

这将填充两个文本框,每个文本框都绑定到来自相应对象的值.现在,如果我更改其中一个文本框中的值,我需要更新相应的数据对象的值.知道怎么做吗？

你如何IF在jQuery模板中使用语句？

这是我的模板:

<script type="text/html" id="attachmentListTemplate">
{{if $item.current_cmt_id == id }}
    <li>
        <a href="${link}" class="fancyIFrame clearfix">${title}</a>
    </li>
{{/if}}
</script>

其中id基本上${id}是由数据绑定传递的(通过KnockoutJS).没有IF语句的输出很好,如下:${$item.current_cmt_id}

这是数据绑定(由KnockoutJS提供):

<ul data-bind='template: { name: "attachmentListTemplate", foreach: attachmentsModel.convAttachments, templateOptions: {current_cmt_id: <%=comment.id%>} }'> </ul>

有关为什么if sttatement无效的任何建议？我正确地比较了这两个条件吗？

我正在使用JQuery模板,并且如果阵列中没有结果发送到模板,则希望生成一行"未找到结果".我现在处理它的方法是有两个模板 - 一个输出行,另一个输出为no行存在实例,但这对我来说似乎很脏.有没有更好的方法来处理这种情况？

if(results.length == 0)
   $( "#NoRowsTemplate" ).tmpl( results ).appendTo("#tableid")
else
   $( "#HasRowsTemplate" ).tmpl( new Array(1)).appendTo("#tableid")

以下是包含行的模板示例:

<script id="HasRowsTemplate" type="text/x-jquery-tmpl">
<tr>
<td>${name}</td>
</tr>
</script>

这是一个没有行的模板示例:

<script id="NoRowsTemplate" type="text/x-jquery-tmpl">
<tr>
<td>No Rows Were Found</td>
</tr>
</script>

有没有办法打破JQuery模板中定义的循环,我们用来打破任何正常循环.

提前致谢.

我正在尝试找到渲染li元素的最佳方法:

我读过我永远不应该替换this.el

所以我似乎必须在我的LiView render()函数中解开我的模板:

// replace element content with html generated from template
var $rendered = $.tmpl(this.template, this.model.toJSON());
this.el.html($rendered.unwrap().html());

我只是得到里面的内容$rendered,因为我不应该替换它.

但我应该如何转移属性？

我试过了 :

this.el.attr('class', $rendered.attr('class'));
this.el.attr('title', $rendered.attr('title'));

但它取代了属性......而有些(如jQuery ui ui-draggable)可能会丢失.

这一切看起来有点笨拙......

谢谢 !

我知道美元符号$是指jQuery对象,但我不知道后面的花括号{}.

是${variable_name}指一个jQuery属性？

谢谢.

我使用jsrender.js和jquery.views.js使用jQuery模板http://github.com/BorisMoore/jsviews

我有1个嵌套循环和内部嵌套循环我想要get itemNumber或其他一些值.例如:

模板:

{{#each ImageQuestions}}
  <div id="image-{{=$view.itemNumber}}">
  {{#each GroupImagesRepeatation}}
    <input type="radio" name="{{=$view.parent.data.QuestionID}}" value="{{=$view.itemNumber}}" />
  {{/each}}
{{/each}}

阵:

var Questions = {
        ImageQuestions: [
                            { 
                                QuestionID: 1,
                                GroupImagesRepeatation: [1, 2, 3, 4]
                            },
                            {
                                QuestionID: 2,
                                GroupImagesRepeatation: [1, 2, 3, 4, 5, 6]
                            }
                        ]
    };

查询:{{=$view.parent.data.QuestionID}}是我想要正常工作的.我需要为每个嵌套循环的radioList提供唯一的名称.

请帮助我

如何获得嵌套的父$ value {{each}}？我希望使用“直接”解决方案，而不必创建第二个模板，并从第一个模板开始使用它。

我正在加载超过7000条记录并在我的页面上显示它们.

Firefox做得很好但我使用Chrome时遇到错误

部分代码:

<tbody>
    {{each(i, item) value}}
    <tr>
        <td class="item_action">
            <a class="edit_item" data-item="${item.id}">
                <img src="path/to/image_edit.png" />
            </a>

            <img src="path/to/image_separator.png" />

            <a class="delete_item" data-item="${item.id}">
                <img src="path/to/image_delete.png" />
            </a>
        </td>
        <td class="item_name">${item.name}</td>
    </tr>
    {{/each}}
</tbody>

如果不是上面我渲染这个:

<tbody>
    {{each(i, item) value}}
    <tr>
        <td class="item_name">${item.name}</td>
    </tr>
    {{/each}}
</tbody>

然后Chrome没问题.所以我想这与我试图呈现的HTML的大小有关,正如我在这里读到的那样.

这个问题有解决方案吗？一世