标签: client-side-templating

我见过的主要差异是:

• 把手增加了#if,#unless,#with,和#each
• 把手增加了助手
• 处理句柄模板(Mustache也可以)
• 把手支持路径
• 允许使用{{this}}in块(输出当前项的字符串值)
• Handlebars.SafeString() (也许还有其他一些方法)
• 把手的速度提高了2到7倍
• 胡子支持倒置部分(即if !x ...)

(如果我对上述内容有误,请纠正我.)

我还缺少其他重大差异吗？

试图使用handlebars.js进行模板化,但库似乎忽略了换行符.

处理换行符的正确方法是什么？是否应该在模板操作后手动更换？

我最近一直在阅读一些关于整个客户端与服务器渲染的非常有趣的文章.

http://www.onebigfluke.com/2015/01/experimentally-verified-why-client-side.html

http://www.quirksmode.org/blog/archives/2015/01/angular_and_tem.html

http://tomdale.net/2015/02/youre-missing-the-point-of-server-side-rendered-javascript-apps/

在谈到客户端时,我已经成为了一个粉丝男孩,但在我阅读这些文章之后,有些观点开始出现在支持服务器端呈现,令我惊讶的是......主要观点是:

• 1)您可以升级您的服务器,但不能升级您的用户设备 - 这意味着,是的...... 您可以控制服务器,因此如果它正在执行,您可以选择升级/扩展.您无法强制用户升级其设备.

• 2)第一个油漆与最后一个油漆 - 现在在experimentally verified...上面的链接上显示用户第一次看到页面(第一个油漆)和用户何时可以使用页面100%(最后一个油漆).现在从用户看到页面时我能想到的是,它需要大脑一些时间来处理从视觉皮层到额叶皮层的信号,然后到达用户实际开始点击他/她的手指的前置皮层,当然,如果首先渲染html,那么在后台进行加载(js文件,绑定等)时,大脑会处理一些事情.

真正让我感到有点的是Twitter报道了人们有多达10秒的加载时间进行客户端渲染,没有人应该体验过!有点儿说," 好吧,如果你没有足够好的设备,抱歉,你只需要等待. "

我一直在想,是不是有使用的好办法既客户端和服务器端模板引擎和两个客户端和服务器使用相同的模板引擎和代码.在这种情况下,它只是要弄清楚它是否是为客户提供渲染页面或让客户端自己渲染它的好处.

无论如何,如果你愿意,可以分享你对我的说法和文章的看法.我全都耳朵!

介绍

我目前正在编写一个非常标准的基于Django的应用程序(基本上是一个花哨的CRM /联系人列表).它有点工作,但随着我不断尝试使用越来越多的AJAXy UI代码(使用jQuery)来改进界面,它开始变得非常痛苦.我得到了很长的脆弱的jQuery事件处理程序块,它们解析DOM,将更改推送回服务器,获取一些JSON,并尝试基于此更新DOM.

我觉得,至少,我可能想要添加一些客户端模板.或者,我可以尝试切换到JS框架,并使用我的Django应用程序作为数据库抽象层.或者即使我知道并喜欢Python,我也可以放弃Django应用程序,并尝试使用JS/Node.js解决方案.

有没有其他人处于这种情况？你是怎么解决的？

设计目标

1. 干:我不想复制我的模型或我的模板(或至少,不仅仅是必要的).
2. 我希望访问者登陆页面以获得结果rendereed服务器端.
3. 当访问者点击某些东西时,我想通过客户端模板和渲染来处理它,并通过AJAX调用将服务器更新到REST接口.

那么......我该怎么做？我收集了一些框架和模板系统的链接.没有特别的顺序:

dust.js:

这显然是LinkedIn用来解决类似的问题.它在服务器端使用Node.js并不理想(我从未使用过Node),但至少它不是基于JVM的.它似乎在github上处于休眠状态 - 我发现了人们一直想知道维护者去哪里的邮件列表.听起来确实不错 - 来自LinkedIn的博客文章很好地销售这项技术,尤其是编译它的能力.但它似乎只是模板化.这足以满足我的需求吗？

小胡子:

这个选项有Python和JS实现,看起来很受欢迎......但是我找不到任何似乎在使用Django的Mustache模板的人.这是因为它太容易得到博客文章,还是不可能或不可取的？它也非常有限; 至少我可能需要转向某种MVC JS框架,对吧？

Backbone,Spine,KnockoutJS,EmberJS,JavascriptMVC等:

有这么多的框架令人望而生畏.乍一看,所有这些看起来都非常好.如果我走这条路,似乎我需要重写我的应用程序,我真的很想找到一个已经做过类似事情的人.而且,如果有一个明确的选择来自Django的人作为背景,那将是很好的选择; 我不想学习六个不同的框架来评估它们.

DerbyJS

这看起来很有趣,因为它在一个包中处理客户端和服务器端,但有点不成熟.他们警告不要在生产中使用它,如果我理解文档,它还不支持任何形式的持久性,这是......限制.我觉得如果它完成了它将是我想要的完美 ...

所以....

所以,呃......现在怎么样？有没有人使用这些工具中的任何一个来尝试将客户端渲染添加到Django webapp？怎么回事？

假设我有这样的knockout.js模板:

<script type="text/html" id="mytemplate">
    <label for="inputId">Label for input</label>
    <input type="text" id="inputId" data-bind="value: inputValue"/>
</script>

如果我呈现我最终用相同的ID(和几个标签使用相同的多个输入页面上的几个地方此模板的值),其中有不好的后果.特别是,依赖于id的所有代码可能无法正常工作(在我的情况下,我使用的jquery.infieldlabel插件会被具有相同id的多个输入混淆).我现在解决这个问题的方法是将唯一的id属性添加到我绑定到模板的模型中:

<script type="text/html" id="mytemplate">
    <label data-bind="attr: {for: id}>Label for input</label>
    <input type="text" data-bind="attr: {id: id}, value: inputValue"/>
</script>

这可行,但它不是很优雅,因为我必须在我的模型中使用这个人工id属性,而不是用于其他任何东西.我想知道这里是否有更好的解决方案.

这是我第一次涉足客户端模板,我想确保我理解并正确使用它.阅读这篇LinkedIn工程博客后,我决定选择dust.js而不是小胡子或把手.请注意,这个stackoverflow帖子回答了我的许多问题,但我仍然有一些我想澄清的事情.

在我工作的环境中,我无法访问服务器端的任何内容,因此我创建的所有内容都必须能够完全在客户端的浏览器中运行.对于此示例,我将尝试从LinkedIn Dust Tutorial重新创建此代码示例.

我包括dust-full.js而不是dust-core.js因为我要动态编译模板:

<script src="js/dust-full.js"></script>

这是HTML:

<script id="entry-template">
{title}

<ul>
    {#names}
    <li>{name}</li>{~n}
    {/names}
</ul>
</script>

<div id="output"></div>

和JavaScript(使用jQuery):

$(document).ready(function () {
    var data = {
        "title": "Famous People", 
        "names" : [{ "name": "Larry" },{ "name": "Curly" },{ "name": "Moe" }]
    }

    var source   = $("#entry-template").html();
    var compiled = dust.compile(source, "intro");
    dust.loadSource(compiled);

    dust.render("intro", data, function(err, out) {
        $("#output").html(out);
    });
});

这似乎工作正常,你可以在 …

我希望能够定义模板一次,并使用它们从服务器端和客户端呈现html.(DRY原则和所有)

我想象的API就是这样的:渲染(JSON,模板) - > html.

我正在使用java框架(实际上是Play框架,但我不认为这是特定于框架的).

我已经阅读了很多类似的问题,最新的,最有帮助的:客户端和服务器端渲染的模板语言.

我非常赞同作者明显的竞争者:Mustache和Google Closure模板不会削减它.(原因见帖子)

要求:

• 必须:客户端渲染
• 必须:模板文件的客户端缓存
• NICE:客户端"编译 - 执行多次"模板文件到快速javascript代码
• 必须:服务器端渲染
• NICE:本机java实现

我看过很多帖子建议使用Node.js进行服务器端模板化.虽然这肯定有用(下划线模板,Handlebarsjs,EJS都可以正常工作)但我很想知道如何将Node.js与java进行通信/组合/集成,毕竟它仍然是需要输出JSON的java框架

我看过帖子提到JVM和node.js之间的一些概念验证通信(通过http或使用JNDI).然而,目前似乎没有图书馆,更不用说经过考验了.

那么为了解决这个问题,你会建议哪些客户端模板引擎也会在java中运行(或者有一些箍,可以从jvm中调用)？如果'hoop'碰巧是Node.js,你会建议使用什么样的通信/库？

我得到了服务器和客户端模板的想法,但是dust.js让我感到困惑.

为了将dust.js用于客户端模板,您需要三个步骤:

1. 编译模板
2. 加载模板
3. 渲染模板

对？

但模板来自哪里？我看到了两种不同的方法:

 1. <script> template <script>
 2. <div> template </div>

......他们都在DOM中.哪个是对的？

我还注意到你可以通过ajax加载模板,所以模板不会在DOM中看到,但我不知道如何做到这一点.

另外,我目前正在使用jade作为快速查看引擎.是否有必要切换到dust.js？有什么好处？

我想预编译我的Handlebars模板,但我不确定它在开发模式下是如何工作的.

通常的做法是有一些像Guard一样的后台进程来持续监控Handlebars模板文件的变化吗？

我正在使用RequireJS来提取模板; 例如:

define(['jquery', 'handlebars', 'text!templates/my_template'], function($, Handlebars, myTemplate) {

  // ...

  var data = {"some": "data", "some_more": "data"};
  var templateFn = Handlebars.compile(myTemplate);
  $('#target').append(templateFn(data));

  // ...

});

所以我理解一旦模板被预编译,就可以这样做:

define(['jquery', 'handlebars'], function($, Handlebars) {

  // ...

  var data = {"some": "data", "some_more": "data"};
  var template = Handlebars.templates['my_template'];
  $('#target').append(template(data));

  // ...

});

请注意以下有关第二个代码段中的内容:

1. RequireJS模块不再拉入模板.
2. 不再使用Handlebars.compile().

因此,只要文件系统级修改发生在模板文件中,我通常会运行Guard以保持模板编译？

基本上我的问题是,开发人员打算这样做吗？

if (development) {
  compile templates
}
else {
  use precompiled templates
}

我也在使用Rails,所以也许有一些黑魔法像sass-rails.

所以,我发现可以使用以下方法在Handlebars中访问数组元素:

{{myArray.2.nestedObject}} and {{myArray.0.nestedObject}}

..例如获取第三个和第一个元素.(handlebars-access-array-item)

有没有办法从数组中获取最后一个元素？我尝试为它创建一个帮助器:

Handlebars.registerHelper("lastElement", function(array) {
  return array.last();  //Array.prototype extension
});

...并在模板中按如下方式调用它:

{{lastElement myArray}} or even {{lastElement myArray.lastElement nestedArray}}

可悲的是,这不起作用.辅助函数显然返回字符串.我需要的是一种即使使用多维数组也能够做到这一点的方法.