Meteor中的翡翠模板

Posted

技术标签:

【中文标题】Meteor中的翡翠模板【英文标题】:Jade templating in Meteor 【发布时间】:2012-04-23 16:42:12 【问题描述】:

在 Meteor 常见问题解答 http://meteor.com/faq/how-do-i-package-a-new-templating-system 中有一些关于添加不同(而不是默认 Handlebars)模板系统的信息。 Jade 是文档中其他地方明确指出的唯一其他示例。

那么有人已经在开发 Jade 了吗?如果没有,我是否可以开始?还是现在还为时过早?例如:

包 API 正在迅速变化,并且没有记录,所以你不能 制作你自己的包。即将推出。

我一直在尝试在我当前的 Ember.js 项目中使用 Handlebars,但对我来说没有什么比 Jade 更优雅了。

【问题讨论】:

在撰写本文时,问题仍未得到解答(正如我所要求的:有 debergalis 答案,但缺少一些细节)。 github.com/denysonique/Meteor-jade-handlebars 这将允许您在 Jade 中简单地编写 html/Handlebars Blade 是一种类似 Jade 的模板语言,它完全支持 Meteor 集成,尽管它还不是 Meteor 核心的一部分。如果您正在寻找 Handlebars 的替代品,可能需要检查一下。 - github.com/bminer/node-blade - github.com/bminer/node-blade#meteor-support - github.com/bminer/node-blade/wiki/Using-Blade-with-Meteor 【参考方案1】:

我们希望看到 Jade 集成。使用packages/handlebars 作为模板。

基本策略是将模板引擎的输出连接到Meteor.ui.render,这是我们实现实时页面更新的方式。只要您的模板返回 HTML,就可以。每当 Jade 模板引用 Meteor.Collection 文档或 Session 变量时,Meteor 都会注册该依赖项,以便知道在数据更改时重新呈现模板。

不过,更好的是同时使用Meteor.ui.chunkMeteor.ui.listChunk。这些将限制 Meteor 在发生更改时必须执行的重新计算量。例如,如果您在 Handlebars-speak 中使用#each 呈现文档列表,则当新文档进入结果集时,没有理由重新计算整个模板。我们只需为新文档渲染一个 HTML 块,并将其插入到 DOM 中。那是listChunk 在行动。

因此,您可能会发现在 Jade 中仅检测 if/unlessfor/each 会让您走得很远。

请注意,包开发不像系统的其他部分那样记录在案。因此,请随时提出更具体的问题。

【讨论】:

非常感谢!我的 javascript 知识只有这么深,但我至少应该能够有一个好的开始。我会带着问题回来... 通知我。我想试试 Meteor,但我还不确定如何与 Jade 集成。 Jade 让我无法编写普通的 HTML。我总是忘记结束标签。 :) 另外,其他对此感兴趣的人可以查看 Blade。 Blade 是一种在 Meteor 0.3.6 中工作的类似 Jade 的语言。 github.com/bminer/node-blade【参考方案2】:

流星>= 0.8.0

使用mquandalle:jade包一直是officially recommended。

流星

    如果您使用 CoffeeScript,您应该查看jade-handlebars。在撰写本文时,有一个问题是 CoffeeScript 模板文件似乎需要包装在 Meteor.startup 函数中,这给我带来了其他问题。

    如果您使用的是 CoffeeScript,您应该查看我的 Cakefile。详细信息都在描述中,但简短的版本是它会自动添加/删除/更新 html 文件以及您的玉文件。我最终将*.html 添加到我的.gitignore 中,这仅在您不在同一个项目中混合html 和jade 时才有效。这有点小技巧,但到目前为止它对我来说工作正常。

【讨论】:

我想使用玉车把,但不是没有coffeescript,这个问题是否在某个地方被跟踪? 最近的问题是#9。 当这个 ..***.com/questions/14389766/… 时,如何预生成 .html 文件? 我的印象是你只需预先生成它以在 html 中使用常规把手(我在 mac 上使用 CodeKit 为 slim 这样做)【参考方案3】:

只需在 Atmosphere 上发布我的第一个流星智能包!

使用 Jade+Handlebars 代替 HTML+Handlebars

https://atmosphere.meteor.com/package/jade-handlebars

【讨论】:

【参考方案4】:

刚刚在我的 Meteor 项目中使用了玉石模板!它是真正的玉,不是玉把或半形玉。它很棒,但它需要 Meteor UI,它目前处于一个名为 blaze-rc1 的开发版本中。所以它目前不适用于 Meteor 0.7。

做'mrt加玉'

&

使用“mrt --release blaze-rc1”运行你的流星项目

https://github.com/mquandalle/meteor-jade/

如果同一文件夹中有coffeescript 和jade 文件,请在文件名的开头添加_,以便在coffeescript 文件之前加载jade 文件,否则将无法正常工作。

【讨论】:

【参考方案5】:

mrt add jade

client/views/templates/hello.jade 你可以这样做:

template(name="hello")
  h1 hello world!
  greeting

  input(type="button" value="click")

使用mrt启动您的应用

【讨论】:

以上是关于Meteor中的翡翠模板的主要内容,如果未能解决你的问题,请参考以下文章

Meteor,从父模板调用子模板中的函数

Meteor:检测嵌套模板中的事件

如何在不使用帮助器的情况下访问 Meteor 模板中的全局变量?

如何处理 Meteor 模板中的 switch case

如何为 Meteor 中的输入控件指示“已选中”或“已选择”状态(使用空格键模板)?

使用 Iron:router 将某些功能或事件的输出返回到 Meteor 中的某个新页面或模板