标签: jquery-templates

我正在使用jquery-tmpl.我的对象模型很简单 - SalesProspect,它包含一组SalesProspectAction对象.这两个对象都有一个名为Status的字段.如何在每个循环中获取孩子的状态？它总是牵引父母的.

<script id="tmplActions" type="text/x-jquery-tmpl">
    <p>${GuestName}</p>
    <table class="stdtable" cellpadding="3" cellspacing="0" width="100%">
        <thead><tr><td>Date</td><td>By</td><td>Changed To</td><td>Notes</td></tr></thead>
        <tbody>
            {{each(i,action) SalesProspectActions}}
            <tr>
                <td>${DateCreated}</td>
                <td>${CreatedBy}</td>
                <td>${Status}</td>
                <td>${Notes}</td>
            </tr>
        {{/each}}
        </tbody>
    </table>
</script>

我尝试了一些不同的东西,比如{$action.Status}等,但没有运气.

我最近开始制作网络应用程序,虽然我做了一些有用的东西,但我不确定最佳做法.

到目前为止,我主要使用Django,web.py和PHP的模板系统.但是现在我正在使用jQuery和不错的ajaxy魔法从服务器获取数据而不刷新客户端,我看到了直接在javascript中构建HTML的优势(所以我可以将一个小的json对象发送到客户端并且让他弄清楚要改变什么以及如何改变).

所以现在我有一些使用模板渲染的位,有些是用javascript构建的,甚至是一个可怕的情况,两者都混合在一起,一个web.py模板生成一个创建HTML表的javascript函数 - 感觉就像C宏再一次!(我最终会重构那个)

这是Web开发中的常见问题吗？任何推荐的最佳实践,例如"在所有内容中使用json,在javascript中尽可能多地渲染","使用库foo"等等？什么处理模板以及使用javascript处理什么的好的启发式方法？

在这里搜索一下,我发现有人询问javascript模板,这似乎是一个可能的解决方案.

此技术是用于小模板还是可用于显示大量数据？如1000行20列的表？

这些案例的绩效如何扩展？显示数据的理想和干净方式是将从Web服务返回的JSONified数据提供给JQuery模板.它在理论上看起来很圆滑,但是它在实践中适用于大型数据集吗？

目前我有一个单独的html页面,里面有4个模板,还有更多.是否可以将模板放在不同的文件中并"导入"它们？我可以在.js文件中定义它们吗？

我正在使用jQquery模板插件:http://api.jquery.com/category/plugins/templates/

我的代码看起来像示例!

我保持Process Explorer打开并检查firefox.exe进程的"Private Bytes"列.在此示例中按"添加"按钮后:

<script id="tmplComment" type="text/x-jquery-tmpl">
    <div>
        <span>Comment:&nbsp;</span>
        <span data-bind="text: $data"></span>
    </div>
</script>    

<input type="button" id="btnAdd" value="Add"/>
<div id="Content" data-bind="template: {name: 'tmplComment', foreach: Comments}">        
</div>

使用此代码:

var vm = {Comments: ko.observableArray(["a", "b"])};
ko.applyBindings(vm);
$("#btnAdd").click(function()
{
    for(var i = 0; i<500; i++)
        vm.Comments.push(i.toString());
});

(也看到这个jsfiddle)

我觉得Firefox使用的私有字节增加了大约50-100 MByte.

在我将它与缺乏依赖性跟踪的实现进行比较时,执行时间也相当长,给出了这个例子:

<script id="tmplComment" type="text/x-jquery-tmpl">
    <div>
        <span>Comment:&nbsp;</span>
        <span data-bind="text: $data"></span>
    </div>
</script>    

<input type="button" id="btnAdd" value="Add"/>
<div id="Content" data-bind="template: {name: 'tmplComment', foreach: Comments}">        
</div>

使用此代码:

var vm = {Comments: ko.observableArray(["a", "b"])};
ko.applyBindings(vm);
$("#btnAdd").click(function() …

我的页面有一个标签:

    <script id='header' src='/Templates/Shared/Header.tmpl.html' type='text/html'></script>

Firebug告诉我Firefox 5正在请求此资源.在HTML选项卡上,我可以导航到script元素并看到它包含/Template/Shared/Header.tmpl.html的内容.

但是,jQuery坚持脚本标记为空.$('#header').html()返回一个空字符串.我不明白为什么.

是的,我可以使用$ .get()加载文件并使用$('#header').html(data)来设置内容.然后我可以按照我的预期使用它.这显然会产生第二个请求,我想避免.

我有一个搜索结果页面,我输出一个使用MVC Razor视图以特定方式格式化的项目列表.

@for (int i = 0; i < group.Count(); i++) {
  <div class="result">
    <div class="ordinal">@((i+1).ToString()).</div>
    <div class="detail"><p>@group.ElementAt(i).Name</p></div>
  </div>
}

客户端可以进一步筛选使用jQuery AJAX以检索新的数据集作为JSON和jQuery模板来呈现结果集代替原来的那些结果.这是jQuery模板:

<script id="resultTemplate" type="text/x-jquery-tmpl">
  {{each(i, result) results}}
    <div class="result">
      <div class="ordinal">${i+1}.</div>
      <div class="detail"><p>${name}</p></div>
    </div>
  {{/each}}
</script>

在AJAX调用之后绑定:

var result = $("#resultTemplate").tmpl({ results: data });
$("#resultsColumn").empty().append(result);

请注意我必须在服务器端Razor代码和客户端jQuery代码中复制搜索结果的HTML格式.我想只有一个版本的数据绑定模板,以减少我必须进行更改时不匹配的可能性.

阅读Stephen Walter的jQuery模板简介他在使用ASP.NET MVC的jQuery模板时暗示"更好地在一起"集成,所以我想知道是否有解决上述场景的工具.

谢谢.

我正在使用Backbone.js创建一个ASP.Net MVC 3应用程序.我也在使用jQuery模板进行视图.

我的问题是如何以有效的方式组织文件？

目前,我有一个用于骨干应用程序的XXX.js文件和存储在显示主干应用程序Index.cshtml的页面中的内联模板.如何将模板移动到我可以包含的不同文件中,例如我包含XXX.js？

App/
  Scripts/
    backbone.js
    underscore.js
    jquery-1.6.4.js
    jquery.tmpl.js
    myBackboneApplication.js
  Views/
    Home/
      Index.cshtml
  Controllers/
    HomeController.cs

我想将模板从Index.cshtml中移出并转换为与myBackboneApplication.js相关的内容.我可以在Index.cshtml中包含一些文件而不是内联的东西.

根据我的经验,似乎服务器和客户端模板中有很多重复的html.客户端我的意思是像Jquery模板,而服务器端我的意思是使用服务器端变量和html.

在下面的代码中,foreach循环在每个页面加载时执行,并用于创建项目列表.请注意,它包含一个带有可变占位符的html块,用于动态值.

在foreach循环下面,我们有一个具有完全相同的html结构的Jquery模板,唯一不同的是变量语法.

有没有办法"合并"它,所以我不必在两种情况下重复相同的HTML标记结构？在两种情况下都必须使用完全相同的html块似乎是错误的.

前

   <h1>Portfolio's</h1>
            <ul id="portfolioList" class="portfolio">
                <% foreach (Portfolio p in Portfolios)
                   {  %>        
                        <li>
                            <span class="delete">[X] </span>
                            <a href="/portfolioDetails.aspx?p=<%=p.PortfolioId %>"><%=p.Name %></a>
                        </li>
                <% } %>
            </ul>

            <!-- portfolio template -->
            <script id="portfolioTemplate" type="text/x-jquery-tmpl">
                <li>
                    <span class="delete">[X] </span>
                    <a href="/portfolioDetails.aspx?p=${PortfolioId}">${Name}</a>
                </li>
            </script>  

我有一些代码

{{if commission}}              
    <td>${profit - commission}</td>   
{{else}}
    <td>${profit}</td>
{{/if}}

利润= 5;

佣金= 2.145

结果= 2.855999999999

我需要 2.856

请帮我

我尝试使用(${profit - commission}).toFixed(2)- 但它不起作用.