Is it better to use html template (and then html import) to create web components or to use template string? What are pros and cons of these methods?
Using html template files is better for reuse: the same file can be used in different web components. Also they are better displayed in most IDEs as they are recognized as full HTML code.
Using template strings is faster (inline). They don't rely on HTML Imports which is not adopted by every browser vendors. Also you can use template literals to insert directly value of JavaScript variables in the DOM.
Actually there's no much diffrences because there's a workaround for every differences list above (i.e. you can reuse template strings if you save them as text file, or you can load html templates withour HTML imports).
Related
I'm trying to refactor a nodeJs project and my css is in my .ejs file. I need to put some dynamic data in my css file. I need to have dynamic data in my css, when my css is in my EJS file it's good.
But when I put my css into an external file, nothing happens!
So, how can I inject ejs tag in my external stylesheet file?
This is one of the questions to which one has to ask you - why do you want to do that? You are asking about a solution to a problem that you didn't describe.
By suspicion is that you are trying to use a templating system for something that could be done with a CSS preprocessor like Sass or Less. Particularly Less can be easily used on both the client side and server side. See http://lesscss.org/#client-side-usage
Now, if you really want to use a templating system created for HTML to generate CSS then you will have to take few things into account: You need to store your CSS templates somewhere where your HTML templates are stored, not where you store your static assets like images. Then, your server will have to serve your generated CSS with a correct MIME type. Then, your HTML will have to reference the styles using a URL to your generated CSS that will be generated on every request instead of being served directly from disk.
I am using Magnolia CMS 5.3.4, the STK, and freemarker (FTL) template scripts.
Some components I have defined relies on specific javascript files. Right now, what I do is that I include these javascript files in the main.ftl template script. I am looking for a way to get them included only if the specific component is present on the page.
I tried to use the jsFiles property in Template Definitions, but it seems it works only for page template definition.
The jsFiles property indeed works only for pages not for components. This is because Magnolia wants to include those files in header already, rather than loading them in middle of the body when component gets rendered.
As a general practice I would anyway recommend combining your js files into one (look at for example plugin loader in resources on how this is done) and set longer time for caching such file so that browser downloads all the script just once for the whole site rather then page by page. The bigger js file you are sending over the more overhead you are cutting off from requesting separate files and better the compression of content for transport will work.
HTH,
Jan
We're starting to use Handlebars for the view layer in some of our projects. We are starting to hit a crossroads between two ways of doing some templating. I've been using partials to handle the templating & having small HTML templates like:
<p id="{{name}}">
<label for="{{name}}Input">{{text}}</label>
{{#if info}}
<small>{{info}}</small>
{{/if}}
<textarea name="{{name}}" id="{{name}}Input"></textarea>
</p>
Another developer feels that we shouldn't be using partials for this & instead we should be creating helpers for this.
I can see helpers being easier to handle input parameters (as I'm currently using some form of "include" helper to include these partials with some extra variables). But it doesn't sit right with me that you are writing HTML into strings in code - I don't think you're separating your concerns properly there. We are also using Handlebars in Java (via [Handlebars.Java][2]), so again your HTML is very much in compiled code - not in simple to edit view files.
Is there a generally accepted way to handle templating in Handlebars? Partials or Helpers or is there something else I don't know about?
Well, first you need to understand that partials are very different in handlebars.js opposed to handlebars.java
In handlebars.js, you declare your own partials and call/name them whatever you want in your controller (usually) and then call them within your view. In handlebars.java a partial is defined in your view and is essentially just an include taking a path attribute. Includes are generally integral to most projects and I don't think there's any benefit to dropping such an important piece of functionality.
Also, I've seen the mentality of "use helpers for everything" in many handlebars.js apps and it is becomes difficult to maintain very quickly. Helpers are a great feature but they should be used sparingly. Whenever possible, use the built in helpers and try structuring your data in a way that you doesn't require additional abstracted logic.
Looking at your example, i think thats exactly the correct useage of partial.
I'm using jQuery plugins in an ASP.Net MVC site.
I've often to include CSS and JS files as required by the plugins I use in every page. So I want to centralize all those dependencies in a single place in my app. thus if a dependency for a given plug-in is changed or updated, I'll only have to modify a single place in my app.
I've thought in two possible solutions:
Extend the HTMLHelper with a partial method
like GetPlugin("jqgrid"); that
will print out all the script and
style tags needed.
Create a partial view for each
pluginlike jqGridDependencies.ascx
that will contain the script and
style tags needed.
Do you have any other idea? what do you think of both proposals?
Could http://combres.codeplex.com/ provide you with a framework for this.
My only personal objection to this method is that each individual pages will have a unique JavaScript/CSS file where as if you combined and compressed everything into one and simply used classes and events to trigger the JavaScript enhancements as and when needed your site would run a lot faster.
I prefer the use of external css and javascript files. There are however many cases where the content of a javascript or css file needs to be dynamic. I'll usually just transfer the javascript or css to inline or inpage code in my aspx page and handle the dynamic stuff there.
Does anyone have a better approach? Would there be a way to generate entire js or css files using asp.net's regular templating language?
I'm currently using webforms but I'd be interested in solving this issue in MVC as well.
Thanks
I've used a HTTPHandler to send back dynamic javascript before. But not something that inherits from System.Web.UI.Page.
Using a HTTPHandler and an ASHX or AXD is the "ASP.Net" way to send back resources dynamically.
I have used handlers for dynamic css. Depending on what you need, you can do the same for js files.
I had a css file with placeholders for the pieces that needed to be dynamic like ##bacgroundcolor##, and the handler just replaced as appropriate.
I have also used an approach where I use css classes to mark html elements that need special behaviors. Then the static js, looks for this elements and hook the appropriate handlers. This is something that certainly would be even easier with jquery (I did it with regular js back then :().
I've done this in an aspx page before, but in my opinion the WebForm style doesn't suit itself well to rendering strictly javascript or CSS. Every time I've done it, the page has ended up looking quite a bit like classic ASP.
hopefully the actual JavaScript you are using would stay static and you would just pass parameters to the JavaScript methods.
I have taken JavaScript code that had been in the markup of a page and containing things like <%= control.ClientID %> and replaced it with static JavaScript. I refactored the code into a class, I then refactored these variable parts into class members. The page creates an instance of the class, with things like ClientID set. The functions can then be static.