Code Monkey home page Code Monkey logo

requirejs-canjs-templates's Introduction

requirejs-canjs-templates

A RequireJS plugin to load CanJS 2.2 templates.

Features

  • Supports EJS, Mustache and Stache templates as featured in CanJS 2.2.

  • Supports development and production builds.

  • Supports loading with RequireJS, for example, define(["stache!template.stache"], function(template) { ... }).

  • Also supports loading templates with can.view("template.stache"), and Mustache-style partials with {{>template.stache}}. Just make sure they are loaded by RequireJS first with, for example,
    define(["stache!template.stache", ...]).

  • Stache templates are pre-compiled for the production build, and dependencies loaded first when using <can-import from="some-project/some-component" />.

  • EJS and Mustache templates are not currently pre-compiled.

Installation

Install with NPM:

npm install requirejs-canjs-templates --save

Or, install with Bower:

bower install requirejs-canjs-templates --save

You'll also need the text RequireJS plugin:

bower install text --save

To install the Stache template plugin, update your RequireJS config with:

require.config({
    // For the shorter plugin prefix (e.g. `stache!file.stache`).
    paths: {
        stache: "path/to/requirejs-canjs-templates/stache",
        text: "path/to/text/text"
    },
    // So that the template library is included in the build. You don't need 
    // this if you explicitly load the template library elsewhere in your app. 
    shim: {
        "path/to/requirejs-canjs-templates/stache": ["can/view/stache"]
    }
});

To install all template plugins, update your RequireJS config with:

require.config({
    // For the shorter plugin prefix (e.g. `stache!file.stache`).
    paths: {
        ejs: "path/to/requirejs-canjs-templates/ejs",
        mustache: "path/to/requirejs-canjs-templates/mustache",
        stache: "path/to/requirejs-canjs-templates/stache",
        text: "path/to/text/text"
    },
    // So that the template library is included in the build. You don't need
    // this if you explicitly load the template library elsewhere in your app.
    shim: {
        "path/to/requirejs-canjs-templates/ejs": ["can/view/ejs"],
        "path/to/requirejs-canjs-templates/mustache": ["can/view/mustache"],
        "path/to/requirejs-canjs-templates/stache": ["can/view/stache"]
    }
});

Load your templates:

define(["stache!./hello.stache"], function(helloTemplate) {
    document.body.appendChild(helloTemplate({}));
});

For further integration examples, see https://github.com/asavoy/requirejs-canjs-project.

Changelog

0.3.0

Thanks to @lastzero:

  • Fixed compatibility with Bower.
  • Fixed Stache template loader by removing debugging code.

0.2.0

  • Added support for in CanJS 2.2 Stache templates.
  • Now pre-compiles Stache templates to avoid parsing step in production.
  • Now requires CanJS 2.2+.

0.1.0

  • Initial version.

License

Released under the MIT license.

requirejs-canjs-templates's People

Contributors

asavoy avatar lastzero avatar

Stargazers

Roman avatar  avatar Marc Godard avatar  avatar Justin Meyer avatar

Watchers

 avatar  avatar

Forkers

lastzero

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.