In Chrome Developer Tools, how can I view the Ember template file (.hbs)
It currently shows a tpl.js file (i.e. in place of tpl.hbs) ...i.e. somehow auto converts it into a JS file, but that JS has nothing from the template code?
The Short answer:
You can't see hbs files on the client side in most ember rollouts.
The Long Answer:
You can't really see the template files in ember.js, especially since they are compiled on the server side and never sent to the client as hbs side
Furthermore I suspect you're trying to debug a template, for that there are some development helpers - http://guides.emberjs.com/v1.10.0/templates/development-helpers/
You can either:
Use the Ember inspector, which will allow you to see the template names ,and then check the hbs on the server side to see what it looks like.
Use simple {{valueToTest}} like on the old printf on unix :)
Use debugger helpers to printout the current context on the template.
These are the ways that I use to debug template.
Related
I used ember generate to create a header component for a youtube video I am following. I have a few questions -
When I ran ember generate component header, the terminal responded with creating the header.hbs file in app>components, but then skips header.js in app/components. I manually created a header.js file in that directory and if I do an alert() in the js file it works.
I have the following code in my header.hbs file.
<h1>Hello There!</h1>
{{yield}}
In my application.hbs file :
<Header/>
{{outlet}}
thoughts, suggestions? Thank you for any help in advance!
Let me try to explain this a bit. Basically there are 4 kinds of components in ember.
without a .js file:
When you invoke a component ember will first look up the component class. When it does not find such a class the behavior depends on the optional feature template-only-glimmer-components. This is by default enabled for new octane apps.
If it is enabled ember will look up the component template based on some standard rules and use it, but there will be no backing class. That is pretty nice. This is also basically what you get in a octane app when you do ember g component my-component.
When template-only-glimmer-components is disabled then an implicit classic component class will automagically be created and used together with the correct template. You don't want this behavior. If you still have it you can migrate away from it by 1) creating a .js file for every component and then 2) enabling template-only-glimmer-components.
with a .js file
When a js file is found ember will get the default export of that module. Then it will look up the correct component manager. This actually depends on that export: setComponentManager should have been called on it. This is usually done in a base class as #ember/component or #glimmer/component.
But you can also write your own custom component manager.
Basically ember will then also look up the template based on that component. A public API for this is proposed in this RFC, but currently a private API is used for the so called template co-location where you place your .hbs file next to your .js file with the same name and just a different extension. This is the default in octant. Here a ember internal build-step in ember-cli basically adds your template to the .js file and uses that API. You can also see the result in a browser debugger. So when there is no default export then ember can not find your template.
I adopted a legacy project that uses EmberJS 2.5.1, and I have a component that is unable to use the JQuery UI Sortable method. The vendor folder contains jquery.ui.min.js, and ember-cli-build.js imports it.
This is what I currently have in my code:
Ember.$("#cute_table_of_puppies_eating_clowns tbody").sortable({})
(Sortable has been simplified for example purposes...)
In Chrome's Debugger it converts to...
_ember["default"].$("#cute_table_of_puppies_eating_clowns tbody").sortable({})
The JQuery selector works, but it cannot find the selector. I put a break point on that line, and tried $("#cute_table_of_puppies_eating_clowns tbody").sortable({}) from the console. This ends up working.
What do I need to do to properly use this function from a component?
I have made element directive, which works with template through templateUrl parameter. This template contains fileupload input, which needs about 8 external js libraries (jquery fileupload plugin). If I have links to these js libraries in template (using standard script element), than everything works fine, but there is an error in browser console on loading:
Error: $digest already in progress
If I put the links to js libraries directly to the page, where I have my directive, there is no error, but it is not good way for reusability.
Are you trying to trigger a $digest manually?
If this is the case, I strongly recommends you to change the approach, as you should let the Angular decides the best time for a $digest. If it's not possible to change, then you should be sure you're not calling a $digest()/$apply() inside an $digest cycle. One of the ways to do so is ensuring !scope.$$phase.
I'm using precompiled templates for several reasons:
Performance (no need to re-compile at runtime)
Code separation (cleaner than embedding <script> tags and hardcoding in JS)
Content security policy (this is for an extension).
Basically, I'm generating templates.js via the handlebars command line utility, based on several template.handlebars files. Next I try to bring these templates into Ember with the following loop:
for (var name in Handlebars.templates) {
var template = Handlebars.templates[name];
Ember.TEMPLATES[name] = template;
}
The result is weird: text seems to be loaded, but many template features (eg. {{outlet}}) don't work. I suspect that this is because Handlebars and Ember-Handlebars are not the same thing.
I guess there are two options (and questions):
Precompile Ember-friendly templates (how can I do this via a command line?)
Properly import Handlebars templates into Ember (how?)
UPDATE: As per the answer, Ember.Handlebars is not the same as Handlebars, so the precompilation is different. Wrote a simple script to precompile for Ember: https://gist.github.com/3723927
Yes, the plain Handlebars compiler compiles to different JavaScript than Ember.Handlebars, so you cannot consume its output with Ember.
I don't know of a way to run Ember.Handlebars through the command line, though it should be possible in principle to write something.
To find out how to precompile with Ember.Handlebars, take a look at the source code of ember-rails - it supports precompilation.
I have a page template in Tridion 2011 with Razor code that prints information based on RenderComponentPresentation() as the first thing in the page. No other markup comes before it, because the component, not the page, contains the initial markup. Unless I put at least one character before the first RenderComponentPresentation in the published output, the template refuses to render any presentations.
So, for example, if this is all that is in the layout TBB this works (in my real code the tcms are real of course):
<
#RenderComponentPresentation("tcm:mytcm","tcm:myothertcm")
but this does not
#RenderComponentPresentation("tcm:mytcm","tcm:myothertcm")
The first prints the contents of the component preceded by the "<", whereas the second does nothing at all. I don't want to have ANY markup directly at the start of the page template, I want the first thing to be the component. Is it possible?
I've just done a quick test in Template Builder using the latest version of the Razor Mediator (1.2) and couldn't replicate your issue.
Maybe you could try:
<text></text>
#RenderComponentPresentation("tcm:mytcm","tcm"myothertcm")
It won't render any additional markup but may trick the mediator into doing what you want (though like I said, I can't replicate your problem so can't verify whether it does).
Normally with Razor you iterate over any and all Component Presentations on the page, and right now I'm working with
#foreach(var cp in ComponentPresentations){
#cp.RenderComponentPresentation()
}
This will render every component on the page, regardless of predefined schema's or templates. Your issue however suggest a problem elsewhere. What kind of output does your page template generate (do mind its the page template using a compound template which in turn includes the Razor TBB you describe here). Is it .aspx, HTML or other? And what is the Component templates' output? is it an HTML fragment, or anything else?
As far as you syntax goes, that should be just fine other than the template invocation:
#RenderComponentPresentation("tcm:x-xxx-xx", "tcm:xx-xxx-xx")
I have a feeling this code only works when used within HTML tags, though, but that's just a hunch.
Bit of a hack but have you tried:
<text>#RenderComponentPresentation("tcm:x-xxx-xx", "tcm:xx-xxx-xx")</text>
or
#Html.Raw(RenderComponentPresentation("tcm:x-xxx-xx", "tcm:xx-xxx-xx"))
Disclaimer: not really used Razor mediator. Just Razor.