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.chunk
和Meteor.ui.listChunk
。这些将限制 Meteor 在发生更改时必须执行的重新计算量。例如,如果您在 Handlebars-speak 中使用#each
呈现文档列表,则当新文档进入结果集时,没有理由重新计算整个模板。我们只需为新文档渲染一个 HTML 块,并将其插入到 DOM 中。那是listChunk
在行动。
因此,您可能会发现在 Jade 中仅检测 if
/unless
和 for
/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,您应该查看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 模板中的全局变量?