bishanshan / RazorJS

A simple JavaScript implementation of the Razor view engine for browsers and Node.

RazorJS

A JavaScript implementation of the Razor view engine that aims to be simple and compatible for use both in the browser and in Node--simple enough for templating:

Razor.compile('hello @model.name')({ name: 'world' }) == 'hello world'

As well as a Node view-engine:

var http = require('http'), 
  url = require('url'),
  Razor = require('../bin/node/Razor.js');

http.createServer(function (req, res) {
  var uri = url.parse(req.url),
    path = uri.pathname.substr(1) || 'index';

  Razor.view(path, function(template) {
    if(template) {
      template({ name: 'Andy Edinborough' }, function(html){
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(html); 
      });
    } 

    else {
        res.writeHead(404, {'Content-Type': 'text/html'});
        res.end('<h1>Not Found</h1>');            
    }
  });

}).listen(1337, "127.0.0.1");

Live Demo

Try RazorJS in your browser now: http://jsbin.com/imihov/latest

Syntax

  <tr>
      <td valign="top">Code Block</td>
      <td valign="top">
          <pre>

@{ var x = 123; var y = "because."; }

  <tr>
      <td valign="top">Expression (Html Encoded)</td>
      <td valign="top">
          <pre>

<span>@model.message</span>

  <tr>
      <td valign="top">Expression (Unencoded)</td>

      <td valign="top">
          <pre>

<span> @html.raw(model.message) </span>

  <tr>
      <td valign="top">Combining Text and markup</td>

      <td valign="top">
          <pre>

@{ model.items.forEach(function(item) { <span>@item.Prop</span> }); }

  <tr>
      <td valign="top">Mixing code and Plain text</td>

      <td valign="top">
          <pre>

@if (foo) { <text>Plain Text</text> }

  <tr>
      <td valign="top">Mixing code and plain text
      (alternate)</td>

      <td valign="top">
          <pre>

@if (foo) { @:Plain Text is @bar }

  <tr>
      <td valign="top">Email Addresses</td>

      <td valign="top">
          <pre>

Hi [e-mail]

      <td valign="top">Razor recognizes basic email
      format and is smart enough not to treat the @ as a code
      delimiter</td>
  </tr>

  <tr>
      <td valign="top">Explicit Expression</td>

      <td valign="top">
          <pre>

<span>ISBN@(isbnNumber)</span>

      <td valign="top">In this case, we need to be
      explicit about the expression by using parentheses.</td>
  </tr>

  <tr>
      <td valign="top">Escaping the @ sign</td>

      <td valign="top">
          <pre>

<span>In Razor, you use the @@foo to display the value of foo</span>

      <td valign="top">@@ renders a single @ in the
      response.</td>
  </tr>

  <tr>
      <td valign="top">Server side Comment</td>

      <td valign="top">
          <pre>

@* This is a server side multiline comment *@

  <tr>
      <td valign="top">Mixing expressions and text</td>

      <td valign="top">
          <pre>

Hello @title. @name.

  <tr>
    <td valign="top">Partials </td>
    <td>
        <pre>

@html.renderPartial('another-view')

  <tr>
    <td valign="top">Layouts </td>
    <td>
        <strong>View</strong>
        <pre>

@{ this.layout = '_layout'; }

@section my_section(){ @:hi! }

Layout

@this.renderBody()
@this.renderSection('my_section')

Description	Code	Notes

shamelessly stolen from @haacked (http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx) and modified for RazorJS