I want to use the features of the IDE to build the templates therefore I avoid using inline templates. The other option is to have the templates in script tags but doing this causes Visual studio to stop giving intellisense for the template html.
I tried to store the template in a div tag and convert it into a script tag before the backbone templated it but for some reason it caused the attribute values (ex: href="{{test}}") to be encoded.
Is there a better way to build the template?
i put my templates in separate html files, and use require.js to load them with its !text plugin. then there is also the added functionality of the !strip you can use with it
so technically instead of loading html from a script tag, you load if from a separate html file, and thanks to the !strip it does not load the and tags, but only the 's content.
more info on how to use could be seen here:
http://requirejs.org/docs/api.html#text
I use jQuery.get to load templates I store in html files.
http://encosia.com/using-external-templates-with-jquery-templates/
I use jQuery.get as above and then append what's returned to the body of the html document. I'm told there are better ways to do it in a related post.
Related
I previously add "angular.min.js" into Intellij-idea for my projects that include JSP pages, but now i want to add agular into JSF page. When i add "angular.min.js" file "ng-app" and "ng-controller" are unknown by intellij! i don't know why, but i add lib and angular.js and when i type ng-app it was unknown by intellij and become red! Can anyone help me ?
I found the solution by add dependency in POM Files:
de.beyondjava
angularFaces-core
2.1.3
Some IDEs - like Netbeans and IntelliJ - try to verify your JSF very strictly. They know the list of "legal" JSF attributes from the taglib file provided by the component library (Mojarra, MyFaces, BootsFaces, PrimeFaces or AngularFaces). The difference between JSP and JSF is that JSP basically is already the final HTML code, while JSF generates the HTML code. So adding ng-app to one of the existing JSF components changes nothing. The attribute won't appear in the HTML code.
One solution is to add AngularFaces. Actually, this does a lot more than simply allowing you to add ng-app to JSF components. For instance, it converts <div> tags to first class citizens of JSF, which comes in handy in many situations.
If you need a less invasive solution, and if you're using JSF 2.2 or above, simply use pass-through attributes. They'll do the trick just as well. By the way, the implementation of AngularFaces does just that: it recognizes the attributes of AngularJS and converts them automatically to pass-through attributes.
Is it possible to include JSON-LD or Microdata from a file in an HTML page?
I know it can be inserted directly, I'm looking for a way to use external files instead.
I can use either JSON-LD or Microdata format. I need to be able to include from a file, if possible, please advise.
You can dynamically embeded JSON-LD in HTML
Google can read JSON-LD data even when it is dynamically injected into the page's contents, such as by Javascript code or embedded "widgets".
but you can't just directly reference a JSON-LD file. You need to eventually embed it into the HTML. That should only require a couple of lines of JavaScript though.
Is there a way to include html templates in AngularJS modules without putting them as strings into js code into the templateCache?
The way we've accomplished this is to write our html templates as standalone html files, then use a grunt task to crunch them into strings (handles all the escaping etc) and inject them into the template cache. best of both worlds, as the developers can work on individual HTML files all under source control, but we drastically reduce roundtrips to the server to pull the templates down to the app at runtime. (At the cost of up-front loading)
If you want to include one html in another, you can use ng-include directive of angularjs.
I have used this like below:
<div ng-include src = "'partials/myModule/myHtml.html'"></div>
I'm building a single page web app when Backbone.js is my MV* framework. It requires Underscore.js so I wan't to use it as my template engine.
I set the template result as the view content to display in it's render function:
this.el.append( compiledTemplate );
I wonder about the right way to implement the template code:
Should it be a JS code that produce an HTML text?
Should it be an HTML file with a script tag to include the JS code?
How can I separate the display from the logic?
How can I write my CSS in a separate file (not in JS file)?
Well... this is what the Underscore template engine is, isn't it? so, no, your template should be HTML with interpolate tags.
Normally it is a DOM element whose content is the template, and, yes, it is used to be a script tag.
Force your self to only use interpolate Model attributes in your templates. You can pass especial pre-calculated attributes if you use any kind of Decorator technique.
There is not any Backbone or Underscore restriction to you not include your external CSS files as usual.
I have two different HTML pages that serve up backbone apps. Up until now, I have put all the js templates inside of each respective HTML file.
Now, I'm refactoring a bit and would like to share some backbone views between files. When loading a view that can't find a js template, the whole app will error out. I know the proper way to merge these two would be to have external js templates, using EJS for example, and have 1 template per file, however, I'd like to just have one huge HTML file with embedded <script type='text/template'> and share the template HTML file between my 2 pages. Is this possible? I tried getting the external js templates with AJAX and writing them to the head, but backbone views still can't find them.
Does anyone else choose to have a file with many javascript templates in it? I also find that I have an unmanageable number of files open when I use ejs. Any help would be most appreciated.
I use an extra javascript/coffeescript file and use underscore's templating to take care of everything. This way you can include the templates and put them into as few (or many) files as you would like.
I'm using a single file for all the templates on my current project and it is working out pretty well.
It's a Asp.Net site, so I made the template file into a user control so I can easily include it in any page that uses Backbone.
If you're fetching all templates through AJAX, maybe you don't have to write them to the head.
You can send templates to the client as JSON Object, for example:
{"about":"<p>About</p>...","gallery":"<p>Gallery</p>...","contact":"<p>Contact</p>..."}
After fetching temples you can store them as templates variable inside some object(or locale storage), and after that you can do the following:
var tempStr = templates['about'],
template = new EJS({element:{value: tempStr, id: 'about'}}),
content = template.render();