标签: client-side-templating

将客户端JavaScript模板放在HTML或JavaScript中?

应该是客户端模板,如下所示(使用下划线的模板引擎):

<p class="foo"><%= bar %></p>
Run Code Online (Sandbox Code Playgroud)

被放置在单独的HTML文件或单独的JavaScript文件中?我知道它可以双向工作.

例如,JavaScript文件可能只包含一个字符串变量列表,如下所示:

var cute = '<p class="the"><%= unicorn %></p>';
var fb   = '<p class="new-design"><%= sucks %></p>';
Run Code Online (Sandbox Code Playgroud)

但我也看到了以下内容:

<script type="text/template" id="omg-template">
  <span id="swag-name"><%= name %></span>
</script>
Run Code Online (Sandbox Code Playgroud)

仅从分离关注的角度来看,模板存储属于哪里?

javascript separation-of-concerns underscore.js client-side-templating

6
推荐指数
1
解决办法
2894
查看次数

在ClojureScript中模板化

我想使用ClojureScript制作一个"单页"风格的Web应用程序.为此,我需要一个客户端模板系统.有没有人有任何经验和/或建议我应该研究哪些ClojureScript模板系统?谢谢.

clojure client-side-templating clojurescript

6
推荐指数
2
解决办法
951
查看次数

在dust.js中格式化数字和日期(linkedin-fork)

如何在dust.js模板中格式化数字,货币或日期值?

数据:

{
today: 'Wed Apr 03 2013 10:23:34 GMT+0200 (CEST)'
}
Run Code Online (Sandbox Code Playgroud)

模板:

<p>Today: {today} </p>
Run Code Online (Sandbox Code Playgroud)

像这样:(与moment.js)

<p>Today: {moment(today).format('dd.MM.YYYY')}</p>
Run Code Online (Sandbox Code Playgroud)

或者围绕一些价格值*

数据:{价格:56.23423425}

模板:

价格:{price.toFixed(2)}

javascript client-side-templating dust.js

6
推荐指数
1
解决办法
5066
查看次数

获取TemplateSyntaxError:意外的char'''在python Google App Engine提供的html文件中包含一个Mustache模板

TemplateSyntaxError: unexpected char u'#'当我在由Python Google App Engine服务器提供的HTML文件中包含一个简单的Mustache模板时,我收到了一个错误.

我想要包含的小胡子模板是:

{{#item}} {{name}} {{/ item}}

我的HTML文件如下所示:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/mustache-template" id="myTemplate">
      {{#item}}{{name}}{{/item}}
    </script>
  </head>
</html>
Run Code Online (Sandbox Code Playgroud)

因为模板是用一个带有type = text/mustache-template的脚本标签包裹的,所以服务器不应该忽略它吗?

我无法理解,为什么我得到TemplateSyntaxError,我该怎么做才能摆脱它.有人有什么想法吗?谢谢!

google-app-engine mustache client-side-templating

6
推荐指数
1
解决办法
6170
查看次数

Kendo UI MVVM-如何在视图中迭代和渲染集合?

我只是想遍历Kendo.View中的数组,并尝试从元素中渲染属性。这在MVC Razor中将非常简单,例如

@foreach( var displayLink in Model ) {
 <h1>displayLink.Text</h1>
}
Run Code Online (Sandbox Code Playgroud)

与其选择摘录,我只是共享了整个文件。

所有这些都会运行,没有异常等。该视图呈现静态内容,但不呈现循环的内容。我打开了evalTemplate = true,但仍然没有骰子。我一直找不到任何方法可以做到这一点,这让我发疯。我所能找到的是连接Kendo UI ListView等的方法。我不想那么重,我只想直接遍历数组。

Index.htm(视图):

<div class="jumbotron">
    <div class="container">
        <h1>Web</h1>
        <p>The future is <i>now</i>.
        </p>
    </div>
</div>


# for(var i = 0; i < DashboardLinks.length; i++) { #
    <h1>#= DashboardLinks[i].TitleText #</h1>
# } #
Run Code Online (Sandbox Code Playgroud)

控制器:

define(
    // == INTERFACE NAME ==
    "Controllers.IHome", 

     // == DEPENDENCIES ==
    [
        "Util.IGetViewSource", 
        "Util.ILayout",
        "ViewModels.Home.IHomeVM"
    ],

    function ( /* Dependency injections: */ getViewSource, layout, iHomeVM)
    {

        // Define the module. …
Run Code Online (Sandbox Code Playgroud)

html javascript client-side-templating kendo-ui kendo-mvvm

5
推荐指数
1
解决办法
2142
查看次数

Nunjucks:循环遍历 for 循环中的前 5 项

Nunjucks 新手,有与这里类似的问题,但我无法让我的代码工作。我正在尝试循环遍历包含 14 个项目的 Nunjucks 循环中的前 5 个项目。到目前为止,我发现range 函数应该能够完成此任务,但无法获得正确的语法。看来我错误地指向了索引。

我获取所有 14 件物品的代码是:

    {% for images in index %}
      <div class="spacer col-md-2 col-sm-6">
      </div>
      <div class="yellp-img col-md-2 col-sm-6">
        <img src="/uploads/images/{{ images.image.filename }}" />
      </div>
    {% endfor %}
Run Code Online (Sandbox Code Playgroud)

这将打印索引中的所有 14 个图像。我还可以使用以下命令打印 14 张图像:

    {% for images in range(0, index.length) -%}
      <div class="spacer col-md-2 col-sm-6">
      </div>
      <div class="yellp-img col-md-2 col-sm-6">
        <img src="/uploads/images/{{ images.image.filename }}" />
      </div>
    {%- endfor %}
Run Code Online (Sandbox Code Playgroud)

问题是所有图像都被破坏(打印时没有 src url 中的文件名),如下所示:

<img src="/uploads/images/" />
Run Code Online (Sandbox Code Playgroud)

这可能是显而易见的,但我不知道如何限制使用文件名中的数据打印多少图像。


更新(回应下面 Aikon …

javascript templating client-side-templating nunjucks

5
推荐指数
2
解决办法
6325
查看次数

类似胡子的模板语言有扩展吗?

我喜欢胡子式模板语言的最小化 - 我现在正在使用胡子和icanhasmustache,但我也检查了车把hogan.

但是,我需要一个'extends'类型的功能,以允许子进程引用特定的父模板.我找不到关于如何在上面的任何一个中实现扩展的文档,但我已经看到(来自随机githib gists)其他人似乎正在这样做.

注意:我知道包含(有时称为部分)的存在,但这些似乎是父母引用特定的孩子.这与我正在寻找的相反 - 在这种情况下,儿童模板是真正的"基础"文件,父母只是偶然的,所以我希望孩子控制这种关系.

javascript mustache client-side-templating hogan.js

4
推荐指数
2
解决办法
2729
查看次数

预编译javascript模板

阅读后,Mustache.js和Handlebars.js之间有什么区别?我对一个问题感到困惑:

预编译javascript模板意味着什么?

以前我使用的是一个简单的客户端缓存,它的工作原理如下:

var tmpCache = {};
if (tmpIneed is in tmpCache){
  use it
} else {
  take it from DOM / upload from external file
  put save it in tmpCache
  use it
}
Run Code Online (Sandbox Code Playgroud)

这与我的技术有什么根本的不同?

javascript templates mustache client-side-templating handlebars.js

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

ejs模板的客户端和服务器端渲染

我一直想学习 NodeJS 以便能够在服务器端和客户端运行相同的代码。我正在将 NodeJS 与 Express 和 EJS 一起使用。所以。我有一个 .ejs 页面,里面有很多 HTML、JS、CSS 和一些模板。为了正义,让它变成这样:

the_list-->some.ejs

<ul> 
<% for(i=0;i>the_list.length;i++) { %>
    <li>the_list[i]</li>
<% } %>
</ul>    
Run Code Online (Sandbox Code Playgroud)

在服务器上进行一些渲染后,我们有一个完美的列表。

所以。现在我想在客户端重新渲染它。我提出了一些 ajax 请求,现在我在 the_list 中有新项目。什么是正确的方法?

ejs node.js client-side-templating server-side-rendering

4
推荐指数
2
解决办法
9552
查看次数

如何将原始html字符串属性嵌入到.hamlc模板中?

目前我有带有rails后端的骨干RIA.我正在使用haml_coffee_assets gem进行客户端模板化.但我想念那里的铁路视图助手.

我决定将原始html字符串添加到我的骨干模型中.所以,我的coffeescript中有这种对象

Object
  avatar: "/avatars/small/missing.png"
  avatar_link: "<a href="/users/ortepko" class="author" id="user-nick-76"><img src="/avatars/small/missing.png" width="32" /></a>"
  humanized_messages_number: "1 Message "
  id: 76
  login_name_link: "<a href="/users/ortepko" class="author" id="user-nick-76">ortepko</a>"
Run Code Online (Sandbox Code Playgroud)

我的模板代码变得非常简单

.text_content
  .comment
    = @contact.avatar_link
    .text
      = @contact.login_name_link
      .messages
        %a{href: '#'}
          = @contact.humanized_messages_number
Run Code Online (Sandbox Code Playgroud)

现在我想渲染一个模板

JST['messages/yet_another_template'] {contact: contact}
Run Code Online (Sandbox Code Playgroud)

但它似乎没有奏效.

backbone.js ruby-on-rails-3 client-side-templating hamlc

2
推荐指数
1
解决办法
1286
查看次数