myslik / csharp-ember-handlebars Goto Github PK

Hi,

I am just getting started with ember.js (and don't have too much .net experience for that matter) and I am currently trying to simply build a basic app.
I am using the 1.2.0-beta1 version of your compiler and all I am currently doing is:
bundles.Add(applicationJsBundle); //Has jQuery, ember, router.js etc.
bundles.Add(new Bundle("/bundles/templates", new EmberHandlebarsBundleTransform())
.Include("/Scripts/App/Templates/application.hbs"));

In _Layout.cshtml I have:
@Scripts.Render("/bundles/templates")
@Scripts.Render("/bundles/app")

and when building the app, I get an error on the Scripts.Render line for the templates.
Specifically:
Method not found: 'System.Collections.Generic.IEnumerable`1<System.IO.FileInfo> System.Web.Optimization.BundleResponse.get_Files()'.

I can also pint the stack trace if that helps. I have been trying for some time now to fix this bug, but no luck. I don't know if this here is the best place to ask about that issue, but hope you might be able to help out.
Cheers

Uncaught TypeError: Object function n(u,i,f,e){if("string"==typeof u&&(f=n,n=u,u=null),!u||-1!==n.indexOf("."))return i(u,n,f,e);var h,s,o=u[r],c=o&&o.descs[n];return c?c.set(u,n,f):(h="object"==typeof u&&!(n in u),h&&"function"==typeof u.setUnknownProperty?u.setUnknownProperty(n,f):o&&o.watching[n]>0?(s=t?o.values[n]:u[n],f!==s&&(Ember.propertyWillChange(u,n),t?void 0!==s||n in u?o.values[n]=f:Ember.defineProperty(u,n,null,f):u[n]=f,Ember.propertyDidChange(u,n))):u[n]=f),f} has no method 'indexOf'
base:4302

Uncaught TypeError: Object function n(t,i){if(""===i)return t;if(i||"string"!=typeof t||(i=t,t=null),!t||-1!==i.indexOf("."))return r(t,i);var r,u=t[f],o=u&&u.descs[i];return o?o.get(t,i):(n=e&&u&&u.watching[i]>0?u.values[i]:t[i],void 0!==n||"object"!=typeof t||i in t||"function"!=typeof t.unknownProperty?n:t.unknownProperty(i))} has no method 'create' base:8578

I still haven't found the cause of the issue

This compiler worked okay in version 1.8.1 but in version 1.9.1 it doesn't. The output I get from the example console project is the same for my template and in the readme, with the same {{App.name}} contents. This is the output in the console and the compiler respectively ...

When I placed this template in the Index.html as a script tag, the function being set in the TEMPLATES array within ember.debug.js looks like this, if it helps at all ...

Any help on this will be appreciated!

After updating to Handlebars rc3 I am getting this error:
uncaught exception: Template was precompiled with an older version of Handlebars than the current runtime. Please update your precompiler to a newer version (>= 1.0.0-rc.3) or downgrade your runtime to an older version (<= 1.0.rc.2).

Any chance you can update the project? For the meantime I am just switching back to rc2, so it is not too urgent. Th support is really appreciated

Must add the ability to compile templates from within ~/scripts/app/templates/ taking the directory name under templates as part of the name.

A router defined as follows:

App.Router.map(function() {
    this.resource('products', function() {
        this.route('index');
        this.route('add');
        this.resource('product', { path: ':product_id' }, function() {
            this.route('index');
            this.route('edit');
        });
    })
});

Should have a director similar to the following

~/
 |_ scripts
        |_ app
             |_  templates
                        |_ product
                        |      |_ index.hbs
                        |      |_ edit.hbs
                        |_ products
                               |_ index.hbs
                               |_ add.hbs

should generate template names:

product/index
product/edit
products/index
products/add

Due to Ember Router's dsl, this approach (unfortunately) will likely not handle plurals in the same directory.

I would like to implement something along these lines before the end of the week.
Hoping for ideas/feedback

Trying out the library with a web project (Web API project). I have set a directory structure with a folder called templates where I keep my .handlebars files, and the bundle config is set as follows:

bundles.Add(new Bundle("~/bundles/templates", 
            new EmberHandlebarsBundleTransform()).Include(
            "~/scripts/app/templates/*.handlebars"));

In my custom transform class, I iterate through the templates and register them with the TemplateBuilder instance, but it throws the exception COM target does not implement IDispatch when I call builder.Register(templateName, template);.

The console project works fine and outputs the precompiled template as expected.

Here's my custom transform class. Note that I've replaced the template coming from the handlebars file with a "plain text" just be sure it wasn't an issue with the template itself as the original template is rather complex.

public class EmberHandlebarsBundleTransform : IBundleTransform
{
    Ember.Handlebars.TemplateBuilder builder = null;

    public EmberHandlebarsBundleTransform()
    {
        builder = new Ember.Handlebars.TemplateBuilder();
    }

    public void Process(BundleContext context, BundleResponse response)
    {
        var usTextInfo = new CultureInfo("en-US", false).TextInfo;

        foreach (var assetFile in response.Files)
        {
            //var template = File.ReadAllText(assetFile.FullName)
            //                   .Replace("\r", string.Empty)
            //                   .Replace("\n", string.Empty)
            //                   .Replace("\t", string.Empty);
            var template = "<div>Pain Text</div>";
            var templateName = Path.GetFileNameWithoutExtension(assetFile.FullName);
            templateName = usTextInfo.ToTitleCase(templateName).Replace("_", string.Empty);
            builder.Register(templateName, template);
        }

        response.Content = builder.ToString();
        response.ContentType = "text/javascript";
        response.Cacheability = HttpCacheability.Public;
    }
}

Stack:

at System.RuntimeType.InvokeDispMethod(String name, BindingFlags invokeAttr, Object target, Object[] args, Boolean[] byrefModifiers, Int32 culture, String[] namedParameters) at System.RuntimeType.InvokeMember(String name, BindingFlags bindingFlags, Binder binder, Object target, Object[] providedArgs, ParameterModifier[] modifiers, CultureInfo culture, String[] namedParams) at System.Type.InvokeMember(String name, BindingFlags invokeAttr, Binder binder, Object target, Object[] args) at Moravia.Utils.ParsedScript.CallMethod(String methodName, Object[] arguments) in c:\Users\tsantos\Documents\GitHub\csharp-ember-handlebars\Ember.Handlebars\ScriptEngine.cs:line 536 at Ember.Handlebars.Compiler.Precompile(String template) in c:\Users\tsantos\Documents\GitHub\csharp-ember-handlebars\Ember.Handlebars\Handlebars.cs:line 38 at Ember.Handlebars.TemplateBuilder.Register(String templateName, String templateBody) in c:\Users\tsantos\Documents\GitHub\csharp-ember-handlebars\Ember.Handlebars\Handlebars.cs:line 55 at Ember.Handlebars.ExampleWebAPI.EmberHandlebarsBundleTransform.Process(BundleContext context, BundleResponse response) in c:\Users\tsantos\Documents\GitHub\csharp-ember-handlebars\Ember.Handlebars.ExampleWebAPI\App_Start\HandlebarsBundleTransform.cs:line 31 at System.Web.Optimization.Bundle.ApplyTransforms(BundleContext context, String bundleContent, IEnumerable 1 bundleFiles) at System.Web.Optimization.Bundle.GenerateBundleResponse(BundleContext context) at System.Web.Optimization.Bundle.GetBundleResponse(BundleContext context) at System.Web.Optimization.BundleResolver.GetBundleContents(String virtualPath) at System.Web.Optimization.AssetManager.EliminateDuplicatesAndResolveUrls(IEnumerable 1 paths) at System.Web.Optimization.AssetManager.DeterminePathsToRender(IEnumerable 1 assets) at System.Web.Optimization.AssetManager.RenderScripts(IEnumerable 1 assets) at System.Web.Optimization.AssetManager.RenderExplicit(Boolean forStyles, String[] paths) at System.Web.Optimization.Scripts.Render(String[] paths) at ASP._Page_Views_Shared__Layout_cshtml.Execute() in c:\Users\tsantos\Documents\GitHub\csharp-ember-handlebars\Ember.Handlebars.ExampleWebAPI\Views\Shared\_Layout.cshtml:line 14 at System.Web.WebPages.WebPageBase.ExecutePageHierarchy() at System.Web.Mvc.WebViewPage.ExecutePageHierarchy() at System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage) at System.Web.WebPages.WebPageBase.<>c__DisplayClass7.<RenderPageCore>b__6(TextWriter writer) at System.Web.WebPages.HelperResult.WriteTo(TextWriter writer) at System.Web.WebPages.WebPageBase.Write(HelperResult result) at System.Web.WebPages.WebPageBase.RenderSurrounding(String partialViewName, Action 1 body) at System.Web.WebPages.WebPageBase.PopContext() at System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage) at System.Web.Mvc.RazorView.RenderView(ViewContext viewContext, TextWriter writer, Object instance) at System.Web.Mvc.BuildManagerCompiledView.Render(ViewContext viewContext, TextWriter writer) at System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context) at System.Web.Mvc.ControllerActionInvoker.InvokeActionResult(ControllerContext controllerContext, ActionResult actionResult) at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass1a.<InvokeActionResultWithFilters>b__17() at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func 1 continuation)

I seem to be having an issue with the naming conventions.

I have templates in sub directories and the output is using a - vs a /

so

(folder user)
xtemp.hbs (the template name here is data-template-name="user-xtemp")
_xpartial.hbs (the template name here is data-template-name="user-_xpartial"

is there something im missing? the convention should be more like this right?

(folder user)
xtemp.hbs (the template name here is data-template-name="user/xtemp")
_xpartial.hbs (the template name here is data-template-name="user/_xpartial"

I pulled the latest version from NuGet and using the latest from the EmberJs site and I get this error when enabling compilation.

Uncaught Template was precompiled with an older version of Handlebars than the current runtime. Please update your precompiler to a newer version (>= 1.0.0-rc.4) or downgrade your runtime to an older version (<= 1.0.rc.2). 

The current workaround is to downgrade, not sure I want to do that for too long.

The latest version of Ember RC6, has Component views, and those require a - in the template name and have to be in a components folder. For example:

components/check-box
components/confirmation-button

I'm pretty sure that this isn't supported yet, but I might be wrong..

Hello all,
I am wondering if current namspace Ember.Handlebars is the good one. Shouldn't we move it to System.Web.Optimization with rest of the Bundle Transforms?

I know it is a breaking change, but I suppose it would make more sense that way.
Let me know what you think.

When giving a folder path to Html.RenderEmberTemplates like such

Html.RenderEmberTemplates(HttpContext.Current.Server.MapPath("scripts/app/templates"))

it will not render the correct data-template-name for templates directly under the templates folder.

The error is that the templateName variable in EmberHelper is set as it would be used for a file instead of a complete directory. The solution is to move the assignment of templateName to where we know that it is a file and not a folder we are dealing with. I can create a pull request later with the solution.

With the optimization package id="Microsoft.AspNet.Web.Optimization" version="1.1.0" targetFramework="net45"

What's not work:
bundles.Add(new Bundle("/bundles/templates",
new EmberHandlebarsBundleTransform()).IncludeDirectory("/app/templates", "*.hbs", true)
);

Failure:
Ember.Handlebars\EmberHandlebarsBundleTransform.cs:
public void Process( BundleContext context, BundleResponse response ) {
var builder = new Ember.Handlebars.TemplateBuilder();
foreach ( var assetFile in response.Files ) {
var virtual_root = assetFile.IncludedVirtualPath
.Substring( 0, assetFile.IncludedVirtualPath.IndexOf( "" ) );
Substring 2nd parameter is less than 0, at the time: assetFile.IncludedVirtualPath is "~/app/templates/about.hbs"

Workaround:
bundles.Add(new Bundle("/bundles/templates",
new EmberHandlebarsBundleTransform()).IncludeDirectory("/app/templates", "*.hbs", true)
);

The process method contains a foreach that iterates over each FileInfo in bundleResponse.Files. System.Web.Optimization has been updated and Files is now an IEnumerable of BundleFile.

How are you all debugging your javascript with BundleTable.EnableOptimizations = true; ? I know I can clear transforms per bundle to stop minification, however the bundles will still be concatenated during development.

I've been thinking of the best way to use resx files but I haven't found a way that isn't too painful for the developer/designer responsible for creating the templates.

My initial idea was to include a few keywords for resource name and resource key names and during compilation an extra step would gather the resources and replace them in the template content. Something along these lines:

<script type="text/x-handlebars" data-template-name="some/template">
    resource:[some_template]
    resource_key:[greeting:Hello], {{fullName}}
    resource_key:[greeting:Hello, {0} {1}:{{firstName}},{{lastName}}]
</script>

• resource:some_template: Identifies the resource object/file used for that template.

e.g.: ~/App_GlobalResources/some_template.resx

• resource_key:[greeting:Hello]: Identifies the resource key greeting which should be retrieved from the resource object; includes a fallback value (Hello) for when the resource is not found.
• resource_key:[greeting:Hello, {0} {1}:{{firstName}},{{lastName}}]: Same as above, but includes the handlebars expressions as arguments if the string in the resource file expects concatenation like String.Format("Hello, {0} {1}", "Hiro", "Nakamura")

When I try to render a partial, e.g. {{partial "test"}} I get this error:
DEPRECATION: You tried to render the partial test, which should be at '_test', but Ember found 'test'. Please use a leading underscore in your partials
Even if I name the hbs file _test or add <script data-template-name="_test" type="text/x-handlebars-template">
Any idea why this could be?

Just curious, I'm looking for that functionality