当前位置：文江博客话题详情

Rails 客户端/服务器端渲染使用单个模板（车把或 Mustache）和 Sammy.js

发布于 2024-10-27 18:23:18 字数 206 浏览 1 评论 0原文

我在网上搜索了一段时间寻找教程，但运气不佳。

据我了解，Twitter 在 Rails 中使用单个 Mustache.js 模板在第一页加载时从服务器进行渲染，然后通过他们自己的 ajax 转换系统（很像 sammy.js）。

我可以将车把和 sammy.js 加载到 Rails 中，但我不知道如何从服务器（rails）和服务器共享单个模板文件。客户端（萨米）端。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫九 2024-11-03 18:23:18

我个人没有构建任何在服务器端和客户端使用相同模板的东西，但这是我可以想到的一种方法。

假设您有一个图像部分 (_image.mustache)：

<div class="image">
  <a href="{{ view_url }}">
    <img height="{{ height }}" width="{{ width }}" src="{{ src }}" />
  </a>
</div>

当您在服务器端渲染页面时，您可以将其用作普通部分并将其插入到 Mustache。然后，您还可以在脚本标记中呈现它以使用 Resig 微模板方案。

{{{image_js_template}}}

在您的 Mustache 视图类中：

def image_js_template
  content_tag :script, :type => "template", :id => "image-template" do
    render :text => self.partial('image')
  end
end

这应该呈现未插值的模板（{{ 仍在文本中）。现在您可以通过 Javascript 的 id 来获取该模板。在backbone.js中，您可以执行以下操作：

class Views.AllImageList extends Backbone.View
  initialize: (options) ->
    @template = $('#image-template').html()

我没有使用Sammy.js，但它似乎希望所有模板都是公开可用的，这可能会带来问题。但是，您仍然可以使用上面的技术并直接传递 render() 和partial() jQuery 对象（如所示这里）。

这是基本想法，但您可能可以做很多事情来使其更加无缝。我会查看有关使用模板的 Jammit 部分，特别是有关使用 Mustache 的部分。此外，ICanHaz.js 有一种简化客户端 Mustache 模板使用的方法。

I have not personally built anything where I've used the same template server-side and client-side, but here is one way that I can think to do this.

Say you have an image partial (_image.mustache):

<div class="image">
  <a href="{{ view_url }}">
    <img height="{{ height }}" width="{{ width }}" src="{{ src }}" />
  </a>
</div>

When you render your page server-side you can just use this as a normal partial and interpolate it for Mustache. Then you can also render it in a script tag to use a Resig micro-templating scheme.

{{{image_js_template}}}

In your Mustache view class:

def image_js_template
  content_tag :script, :type => "template", :id => "image-template" do
    render :text => self.partial('image')
  end
end

This should render the template uninterpolated (with the {{'s still in the text). Now you can just pick up this template in your Javascript by it's id. In backbone.js you could do something like:

class Views.AllImageList extends Backbone.View
  initialize: (options) ->
    @template = $('#image-template').html()

I've not used Sammy.js but it appears that it expects all of it's templates to be publicly available, which could present an issue. However, you can still use the technique above and pass render() and partial() jQuery objects directly (as indicated here).

This is the basic idea, but there is probably a lot you could do to make this more seamless. I would checkout the Jammit section on using templates, specifically the part about using Mustache. Also ICanHaz.js has a way of simplifying the use of client side Mustache templates.

回复收藏 0 原文

~没有更多了~