Giter VIP home page Giter VIP logo

handlebarshelper's Introduction

HandlebarsHelper

HandlebarsHelper will ultimately help you inject your handlebars files into your ASP.Net application.

Installation

Use Nuget to install, either search for HandlebarsHelper in the Package Manager UI or from the console Install-Package HandlebarsHelper. https://www.nuget.org/packages/HandlebarsHelper/

Quick Start Guide

The most common use case is you'd like to bundle precompiled/minified EmberJS Handlebar templates.

In the BundleConfig

For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725

public class BundleConfig
{
  public static void RegisterBundles(BundleCollection bundles)
  {

    //other bundles
  
    // ~/bundles/templates is the bundle name
    // ~/Scripts/templates is the virtual path to your template files
    bundles.Add(new Bundle("~/bundles/templates", new HandlebarsTransformer())
           .IncludeDirectory("~/Scripts/templates", "*.hbs", true)
            );

    BundleTable.EnableOptimizations = true;
  }
}

In your view

// this should be after the Ember framework
@Scripts.Render("~/bundles/templates")

Done

Debug Mode

This use case is you want the templates injected into the page, but not precompiled/minified/bundled, just inject em

In your view (Razor)

using HandlebarsHelper;
   
// this should be after the Ember framework
// "~/scripts/templates" is the virtual path to the templates
//  new[] { "*.hbs" } is the filter extension array (add as many as you want)
@HandlebarsHelper.RawTemplateInjector.InjectRawTemplates("~/scripts/templates", new[] { "*.hbs" })

Done

Template naming

Template naming is an area of controversy, I have my opinion, you have yours, and mine is right ;)

How I name the files

There are a few different scenarions that render differently

Path from included directory File name Template name Scenario
/ apple.hbs apple file in the root
/blah/ blah.hbs blah file in folder and matches the folder name(exact match)
/blah/ cow.hbs blah/cow file in folder, and doesn't match the folder name
/dog/ Dog.hbs dog/Dog file in folder, and doesn't match the folder name
/dog/ elephant.hbs dog/elephant file in folder, and doesn't match the folder name

You hate how I implemented the naming, cause you like how you did it, despite being wrong

That's cool, The HandlebarsTransformer and RawTemplateInjector take an optional parameter which allow you to define a class that names your templates!

Create a new class and implement the ITemplateNamer interface

public interface ITemplateNamer
{
  string GenerateName(string bundleRelativePath, string fileName);
}

What is passed in? If you look up above, at the table, column 1 and 2, that's it. The template's relative path and the template's file name.

Example custom namer:

public class CustomTemplateNamer : ITemplateNamer
{
  public string GenerateName(string bundleRelativePath, string fileName)
  {
    var fileNameNoExtension = Path.GetFileNameWithoutExtension(fileName);
    return "moooooooooooo" + fileNameNoExtension;
  }
}
Bundled: In your BundleConfig
bundles.Add(new Bundle("~/bundles/templates", new HandlebarsTransformer(new CustomTemplateNamer()))
       .IncludeDirectory("~/Scripts/templates", "*.hbs", true)
       );
Raw: In your View
  @HandlebarsHelper.RawTemplateInjector.InjectRawTemplates("~/scripts/templates", 
                                                           new[] { "*.hbs" }, 
                                                           new CustomTemplateNamer());

Report all issues, feel free to submit PRs, clean up the code, make the readme more coherent, stylize my example page.

Another example can be found here: https://github.com/kingpin2k/Zoo

handlebarshelper's People

Contributors

kingpin2k avatar

Watchers

 avatar  avatar

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.