我一直在玩NodeJS,ExpressJS等,并且真的希望能够让模板引擎更接近ASP.Net MVC的节点(jshtml)的Razor引擎。我很好奇是否有人熟悉这样的野兽,或者更接近它的东西。
我想要的主要功能是基于区域/部分的主/父布局/模板插入,这似乎不是我到目前为止看到的节点的模板引擎中的一个功能。
- 编辑:2012-02-09 -
我基本上想要能够做到以下......
_layout.jshtml
<!DOCTYPE html>
<html>
<head>
<!-- meta tags, etc -->
<!-- title set in page -->
<title>@ViewBag.Title</title>
<!-- site-wide styles -->
@RenderSection("Styles", false)
</head>
<body class="@ViewBag.PageClass">
<!-- site-wide header -->
<div id="side_content">
@RenderSection("Side", false)
</div>
<div id="main_content">
@RenderBody()
</div>
<!-- site-wide footer -->
<!-- site-wide scripts -->
@RenderSection("Scripts", false)
</body>
</html>
mypage.jshtml
@{
ViewBag.Title = "My Page";
ViewBag.PageClass = "page-x";
}
@section Styles {
<link ... />
}
@section Scripts {
<script type="text/javascript">
var pagesettings = @Html.Raw(Model.SomeJsonContentFromController);
</script>
}
@section Side {
side content here
}
main content here
从视图到布局的某些标准,包括多个部分。我还没有看到如何在Jade或EJS中做到这一点的例子,如果有可能我会欣赏这种见解。
- 编辑:2012-02-13 -
看起来ExpressJS 3 + Jade现在有“扩展”和“阻止”关键字来准确定义我想要的东西。示例from here。感谢@Don的回答&amp;评价。
// my-template.jade
extends my-layout
// only guessing this var will be passed to the layout (testing later)
- var pageTitle = "My Template";
- var pageClass = "my-template";
block styles
style(type="text/css")
block scripts
script(src="myscript.js")
block side
div Side Content Here
block main
div Main Content Here
//my-layout.jade
doctype 5
html
head
title #{pageTitle} - My Site
body(class=pageClass)
#side
block side
#main
block main
block scripts
我不是100%肯定上面的某些方面(即从模板中传递到布局的变量......将在稍后尝试确认。
答案 0 :(得分:32)
Vash是我发现的功能最全,最新的剃刀克隆。绝对检查一下。
答案 1 :(得分:12)
我刚遇到Bliss模板引擎。它使用几乎精确的剃刀语法。您可能需要做一些简单的工作才能将它干净地整合到express中。
答案 2 :(得分:7)
当我遇到似乎支持Express JS的JSHTML时,我只是想看看Bliss。
答案 3 :(得分:1)
我没有遇到过复制Razor语法的节点视图引擎,这种方法相当不错但非常独特.Net。可能是一个很好的项目,从github开始。
对于部分支持,请查看EJS中的部分内容或Jade中的导入内容。它并不完全类似于你所寻找的东西,但它们会完成这项工作。我的个人意见,挖掘玉;你使用的越多,你就越喜欢它。
答案 4 :(得分:0)
RAZ: Razor-Express view template engine for NodeJS
我试图使其语法尽可能接近 ASP.NET MVC Razor 。
适用于question中的 RAZ 语法示例:
_layout.raz
<!DOCTYPE html>
<html>
<head>
<title>@ViewData.Title</title>
@Html.section("Styles", false)
</head>
<body class="@ViewData.PageClass">
<div id="side_content">
@Html.section("Side", false)
</div>
<div id="main_content">
@Html.body()
</div>
@Html.section("Scripts", false)
</body>
</html>
mypage.raz
@{
Html.layout = "_layout";
ViewData.Title = "My Page";
ViewData.PageClass = "page-x";
}
@section Styles {
<style type="text/css">
#side_content { background-color: yellow; }
#main_content { background-color: skyblue; }
</style>
}
@section Scripts {
<script type="text/javascript">
var pagesettings = @Html.raw("<div>Raw content example</div>");
</script>
}
@section Side {
<div>side content here</div>
}
main content here
欢迎提供建设性的反馈意见。