I changed my handlebar template's extension and referred to the same in the function which called handlebarjs' compile function.
It worked perfectly fine with no issues.
But I'm curious to know if anyone else tried that?
Please let me know if you think this could cause problems down the road for any reason.
For some reason I feel that the very extension .handlebars is a bit long. I prefer to keep it to a max of 4 chars ... something like .txt or .html.
Please let me know if you see any issues with this approach.
For example, I renamed login.handlebars to login.html
In the getTemplate function (as shown below), I will call this template for compilation
function getTemplate(name) {
if (Handlebars.templates === undefined || Handlebars.templates[name] === undefined) {
$.ajax({
url : "templates/" + name + ".html",
success : function(data) {
if (Handlebars.templates === undefined) {
Handlebars.templates = {};
}
Handlebars.templates[name] = Handlebars.compile(data);
},
async : false
});
}
return Handlebars.templates[name];
}
My shop uses .handlebars, along with Require.js and Alex Sexton's require-handlebars plug-in, and it all works without issue. The far more common suffix however, and the default one in that plug-in I just mentioned, is .hbs (presumably because .hbs is a 3-character extension not already taken by another file type).
You can for example use .hbs, .handlebars, or even a different extension for that matter, and it should work just fine with any sort of library (eg. Require) where the suffix could actually matter. There are no guarantees of course, but because there is no official extension library authors generally know better than to hard-code one.
I would caution against using .htm or .html for these files though ... unless you have a really picky IDE. Most IDEs can be set to treat .hbs as if it were an HTML files, for syntax coloring and what not. If your's can't, then .htm might make sense. Otherwise I'd keep the file extension distinct, so that you can easily distinguish between the two types of files.
Related
I thought I was doing something easy, but it got so complicated that I feel like I am missing something. We have a Content-Type (CT) that moves through a workflow. In each phase of the workflow, the output changes which fields are visible.
We want to easily access both the record's Value and Label. In other words, lets say we have a CT named EventInstance and one of fields is Url. So in code we normally just do #Content.Url. However, for table headings (and in other output) we want to display "Website Link (Url)" instead of "Url". So in the CT we simply changed the Name* (Label):
So then I went looking for how to get that "Label" field (2) instead of the Name (1). What I came up with was this. But it seems crazy complicated...
public string GetLabelForField(dynamic de, string fieldName)
{
var attributes = AsEntity(de).Type.Attributes as IEnumerable<IContentTypeAttribute>;
return attributes.First(t => t.Name == fieldName).Metadata.GetBestValue<string>("Name", "#All");
}
And I call it like this
var ev = listEvent.First();
<pre>
help.GetLabelForField(ev): #help.GetLabelForField(ev, "Url")
</pre>
And that outputs what I want:
help.GetLabelForField: Website Link (Url)
I realize I should be satisfied because it works, but it seems like a lot of work and a steep learning curve. Is there a better way to get access to this (seemingly common) property?
These APIs are not documented much, because accessing input-field configuration used in the Edit-UI isn't that common.
But: I believe you could also do this (shorter, but probably not perfect):
var attribute = AsEntity(de).Type[fieldName];
var name = attribute.Metadata.GetBestValue<string>("Name");
I know i can use $injector.has('<constant name>') to get a constant by name but the problem is i don't know the name ahead of time, i just want to get a list of all angular constants that (for example) start with "json_". The reason i need this is because i'm building a module that people can plugin to their own code, this is why i won't know the names ahead of time but i can at least ask the programmer to start the constants i need to work with, with "json_". Currently i have to tell them to name their constants exactly "json1", "json2", "json3", etc and this is bad because the user has to keep track of where they are in numbering and it's not good design. There doesn't seem to be anything directly within the API's to do what i'm trying to do.
There is no built-in way to get all constants in an angular module, but you can achieve this by loop through _invokeQueue which an internal using array to hold all registered services on a given angular module. If you registered a constant called json_obj in angular.module('app'), then in angular.module('app')._invokeQueue should contain an array like:
['$provider', 'constant', ['json_obj', valueObj]]
So you can get a list of json_* constants by:
function getJsonConstants(){
var queue = angular.module('myApp')._invokeQueue;
var jsonConstant = [];
angular.forEach(queue, function(item){
if(item[1] === 'constant'){
if(item[2][0].match(/\bjson_/gi)){
jsonConstant.push({
key: item[2][0],
value: item[2][1]
})
}
}
})
return jsonConstant;
}
One more thing, this function can only return all constant registered in angular.module('myApp'), if myApp has any dependent modules, you should loop all _invokeQueue in those modules to get completed constant list.
Example:
.. member:: CK_UTF8CHAR model[16]
Gives me both the type and the name bolded and hyperlink not working.
Practically we are forced to use this cases like that:
.. member:: model
Because otherwise it would be incorrect (use it without array and with the same type).
Well, this seems to be a real bug in Sphinx. I reported that and it was confirmed. I've come up with a little workaround for now, but it's more of a crutch. Just put the following to the layout.html file of your Sphinx theme:
<script>
$('dl.member dt').each(function() {
$(this).find('big:first').text('[')
$(this).find('big:last').text(']')
});
</script>
Now you may use parenthesis instead of brackets in broken structures: model(16) becomes model[16] (and label(\ ) becomes label[], but only within the .. member:: directive.
I know it is not a very elegant solution, but it is OK as a temporary fix, until the bug gets resolved.
As far as I know assigning this to a variable is used within callbacks where the this scope may change. But digging through the ExtJS source I found it used in all sorts of functions but not always. So is there any reason that I would assign this to a local variable beneath the scope or is the ExtJS source just struggling with different developer styles?
#kevhender pointed me to the right sencha forum thread where evan has given a very good explanation.
It's only for the size. And here's a example:
function doA() {
var me = this;
me.a();
me.b();
me.c();
me.d();
me.e();
me.f();
me.g();
me.h();
me.i();
me.j();
me.k();
me.l();
}
function doB() {
this.a();
this.b();
this.c();
this.d();
this.e();
this.f();
this.g();
this.h();
this.i();
this.j();
this.k();
this.l();
}
Compressed we get:
function doA(){var a=this;a.a();a.b();a.c();a.d();a.e();a.f();a.g();a.h();a.i();a.j();a.k();a.l()}
function doB(){this.a();this.b();this.c();this.d();this.e();this.f();this.g();this.h();this.i();this.j();this.k();this.l()};
It adds up.
According to that we should
NOT use a local var if we use this only up to three times
function doA(){var a=this;a.a();a.b();a.c();};
function doB(){this.a();this.b();this.c();};
and use it if we use this more often then three times
function doA(){var a=this;a.a();a.b();a.c();a.d()};
function doB(){this.a();this.b();this.c();this.d()};
There are a few reasons for this, the most significant being that using a local variable will save a few bytes during compression of the files. It may not seem like much for a small bit of code, but it can add up a good bit over time.
There is a long thread at the Sencha forums talking about this very issue: http://www.sencha.com/forum/showthread.php?132045.
As you've correctly stated this is sometimes used in places where the scope might change.
There are cases where you want to do the same to make sure there are no scoping issues.
Other than that, the devs sometimes just assign this to a variable out of habit more than out of necessity.
I need to know if a boxComponent exists in a ext formPanel in order to take some actions... Is there some way to know that?
something like this:
if(getElementById("boxId") != 'undefined' ){
alert('exists');
}
The common pattern that most people use is this:
var myBoxCmp = Ext.getCmp('cmpId');
if(myBoxCmp){
myBoxCmp.doSomething();
}
Same thing for Elements:
var el = Ext.get('elId');
if(el){
el.doSomething();
}
You can also use methods like Container.findById, but if you have an id (assuming it is unique, which it should be) just use getCmp.
EDIT: Several years have passed since this original answer, and nowadays getCmp is generally frowned upon as a code smell and should typically be avoided in applications (promotes global references, which generally indicate poor design when they are required). It's typically better to use controller references (if using MVC) or the various ComponentQuery or Container methods to reference related components (e.g. down, child, getComponent, etc.)
I just do it the extjs way and i prefer not to use getElementById() which is a native js method and may cause incompatibility issues in diffrenet browsers:
if (!Ext.getCmp('componentid')) {
alert('boxId is empty');
}
You can use Ext.get('boxId'). It returns null if the object doesn't exist and returns an Ext.Element object.
Using getElementById would probably be much faster though. Do you have any specific objection against it?
Use the Ext.isEmpty(object) method.
if(Ext.isEmpty(getElementById("boxId")) {
alert('boxId is empty');
}
function openView(cid) {
shortName = cid.substr(cid.lastIndexOf(".")+1, cid.length);
if(Ext.get(shortName) == null) Ext.create(cid);
Ext.Viewport.setActiveItem(Ext.getCmp(shortName));
}
This function opens a view like
openView('MyApp.view.Oeffnungszeiten');
and if the View exists it accesses the old instance