ExpressJS的Razor视图引擎

时间:2012-02-08 16:30:14

标签: node.js razor express

我一直在玩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%肯定上面的某些方面(即从模板中传递到布局的变量......将在稍后尝试确认。

5 个答案:

答案 0 :(得分:32)

Vash是我发现的功能最全,最新的剃刀克隆。绝对检查一下。

答案 1 :(得分:12)

我刚遇到Bliss模板引擎。它使用几乎精确的剃刀语法。您可能需要做一些简单的工作才能将它干净地整合到express中。

Combining with express

答案 2 :(得分:7)

当我遇到似乎支持Express JS的JSHTML时,我只是想看看Bliss。

https://github.com/elmerbulthuis/jshtml

答案 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

欢迎提供建设性的反馈意见。