I made a template helper called "$" within my Marionette setup
templateHelpers:function(){
return jQuery.extend(this,{
'$':function (text){
return Handlebars.compile('{{'+text+'}}')(this);
}
});
},
this allows me to do this
{{$ collection.display}}
which will resolve collection.display, typically to name, but may be some other field name like service_id, and then my handler will resolve that.
So I have indirection, and cheaper than typing
{{{{collection.display}}}}
All good. The only snag is, when I stick it inside an {{#each items}} loop,
{{#each items}}
<option value="{{this.id}}">{{$ ../collection.display}} </option>
{{/each}}
it blows up with
Error: Missing helper: "$"
Note that it doesnt matter what I put after $ when inside the block {{$ anything}} will fail, the helper is just not there.
This might be an asynchronicity problem. The body of an iterator block appears to being compiled before my handlers have been applied.
Anyway, if I just go
Handlebars.registerHelper('$', function (text){
return Handlebars.compile('{{'+text+'}}')(this);
});
Before I start declaring any Marionette views, then it works, so not sure if that counts as a bug in marionette, handlebars or of course me.
This is a duplicate of Handlebar helper inside {{#each}}
Related
It may be a dumb question, but I just cannot figure out why sometimes Swal.fire works and sometimes it doesn't.
The alert I am using is quite simple -
Swal.fire({
title:'Slow response!',
text:'Please indicate the side as quickly and accurately as possible',
icon:'warning'
})
But it only works when within a function starts as:
$(document).keydown(function (e) {...})
Since this function is built in a constructor, I add .bind(this) at the end to make use of "this" object. Nevertheless, my sweetalert does not work in this situation. It also does not work if the inner function starts as:
$(document).keydown((e)=> {...})
I did not see any errors in console. Any comments are highly appreciated!
I'm trying to write a login form with ember.js/emblem.js. Everything works, unless I try I18ning the placeholders like so:
Em.TextField valueBinding="view.username" placeholder="#{t 'users.attributes.username}"
Em.TextField valueBinding="view.password" placeholder="#{t 'users.attributes.password'}" type="password"
I get the same response if I try:
= input value=view.username placeholder="#{t 'users.attributes.username}"
= input value=view.password placeholder="#{t 'users.attributes.password'}" type="password"
In both cases, I get this error message:
Pre compilation failed for: form
. . . .
Compiler said: Error: Emblem syntax error, line 2: Expected BeginStatement or DEDENT but "\uEFEF" found. Em.TextField valueBinding="view.username" placeholder="#{t 'users.attributes.username}"
I assume this is happening because I'm trying to compile something from within a statement that's already being compiled. In evidence of this, I don't get the runtime error if I change the code to:
input value=view.username placeholder="#{t 'users.attributes.username}"
input value=view.password placeholder="#{t 'users.attributes.password'}" type="password"
But the downside is that the value bindings no longer work, which still leaves the form nonoperational. Is there another way of approaching this problem that I haven't considered?
As Alexander pointed out, this is a limitation of Ember and Handlebars. The workaround that I've been using is to make the placeholder refer to a controller property which then returns the translated string. For example:
{{input
type="text"
value=controller.filterText
placeholder=controller.filterPlaceholder }}
And then in the controller:
filterPlaceholder: function () {
return i18n.t('players.filter');
}.property('model.name'),
This is beyond the scope of what Emblem can do because it's an inherent limitation of Ember+Handlebars. What you're trying to do is use the input helper and, inside the helper invocation, use another helper t to get the value for the placeholder option. You can't (presently) do this in Ember, so Emblem's not going to be able to do that for you.
edit: you should try the Ember i18n library. I haven't used it yet, but it seems like what you'll want to do is to mix in the TranslateableAttributes mixin into Ember.View, like:
Ember.View.reopen(Em.I18n.TranslateableAttributes)
and then in your emblem template you can do something like
= input placeholderTranslation="button.add_user.title"
I noticed a typo in the first placeholder="#{t 'users.attributes.username}". It's missing the closing single quote.
The Emblem syntax error, line 2: Expected BeginStatement or DEDENT but "\uEFEF" found. can be misleading. I've found that the error is somewhere else entirely to what was being reported. For instance, linkTo without a | for plain text reports a similar error.
You should use the views to format things and drop them into the template. Controllers are not meant to know what happens at the template.
You would also want that to be a property, so i18n will work just once and then you can use the cache version.
Templete:
{{input value=view.username placeholder=view.usernamePlaceholder}}
{{input value=view.password placeholder=view.passwordPlaceholder type="password"}}
View:
export default Ember.View.extend({
usernamePlaceholder: function() {
return Ember.I18n.t('users.attributes.username');
}.property(),
passwordPlaceholder: function() {
return Ember.I18n.t('users.attributes.password');
}.property()
});
Good day!
I began writing my own basic JavaScript library for personal use and distribution a few days ago, but I am having trouble with one of the methods, specifically bind().
Within the method itself, this refers to the library, the object.
I went to Google and found function.call(), but it didn't work out the way I planned it--it just executed the function.
If you take a look at another method, each(), you'll see that it uses call() to pass values.
I also tried the following:
f.arguments[0]=this;
My console throws an error, saying it cannot read '0' of "undefined".
I would like to be able to pass this (referencing the library--NOT THE WINDOW) to use it in the event listener.
You can see it starting at line 195 of the JavaScript of this JSFiddle.
Here it is as well:
bind:function(e,f){
if(e.indexOf("on")==0){
e=e.replace("on","");
}
if(typeof f==='function'){
/*Right now, 'this' refers to the library
How can I pass the library to the upcoming eventListener?
*/
//f=f(this); doesn't work
//f.call(this); //doesn't work
//this.target refers to the HTMLElement Object itself, which we are adding the eventListener to
//the outcome I'm looking for is something like this:
/*$('h3').which(0).bind(function({
this.css("color:red");
});*/
//(which() defines which H3 element we're dealing with
//bind is to add an event listener
this.target.addEventListener(e,f,false)
}
return this;
},
Thank you so much for your help, contributors!
If, as per your comments, you don't want to use .bind(), rather than directly passing f to addEventListener() you could pass another function that in turn calls f with .call() or .apply():
if(typeof f==='function'){
var _this = this;
this.target.addEventListener(e,function(event){
f.call(_this, event);
},false)
}
Doing it this way also lets your library do any extra event admin, e.g., pre-processing on the event object to normalise properties that are different for different browsers.
So in this particular case you actually want to call JavaScript's built in bind method that all functions have.
f = f.bind(this);
f will be a new function with it's this argument set to whatever you passed into it.
Replace f=f(this); with f.apply(this);
Look at underscore code, here:
https://github.com/jashkenas/underscore/blob/master/underscore.js#L596
Using JQuery.load(), I change the content of my website's mainWindow to allow the user to switch between tabs. For each tab, there is one or multiple scipts that contain functions that are executed once the tab content is loaded.
Obviously when switching to the tab for the first time, the script has to be fetched from the server and interpreted, but this shouldn't happen if the user switches back to the tab later on. So, to put it short:
Load() html
make sure javascript functions exist, otherwise load script and interpret it.
call a a function on the javascript after the DOM is rebuilt.
Step one and two have to be complete before step 3 is performed.
At the moment, I am using nested callbacks to realize this:
function openFirstTab(){
$("#mainWindow").load("firstTab.php", function(){
if(typeof(onloadfFirstTab) != "function"){
jQuery.getScript("assets/js/FirstTab.js", function(){
onloadFirstTab();
});
}
else{
onloadFirstTab();
}
} );
}
but I feel that there should be a better way.
You can't write the code entirely synchronously since you can't load script synchronously after page load ( unless you do a synchronous XHR request and eval the results - not recommended ).
You've got a couple of choices. There are pre-existing dependency management libs like RequireJS which may fit the bill here, or if you just need to load a single file you can do something like this to clean up your code a bit rather than using if/else:
function loadDependencies() {
// For the sake of example, the script adds "superplugin" to the jQuery prototype
return $.getScript( "http://mysite.com/jquery.superplugin.js" );
}
function action() {
// If superplugin hasn't been loaded yet, then load it
$.when( jQuery.fn.superplugin || loadDependencies() ).done(function() {
// Your dependencies are loaded now
});
}
This makes use of jQuery Deferreds/Promises to make the code much nicer.
If you don't want to load the JS more than once and you are going to dynamically load it, then the only way to know whether it's already loaded is to test for some condition that indicates it has already been loaded. The choices I'm aware of are:
The simplest I know of is what you are already doing (check for the existence of a function that is defined in the javascript).
You could also use a property on each tab (using jQuery's .data() that you set to true after you load the script.
You could write the dynamically loaded code so that it knows how to avoid re-initializing itself if it has already been loaded. In that case, you just load it each time, but the successive times don't do anything. Hint, you can't have any statically defined globals and you have to test if it's already been loaded before it runs its own initialization code.
(Haven't tested it yet, so I am not sure if it works, especially since I didn't yet really understand scope in javascript:)
function require(scripts, callback){
var loadCount = 0;
function done(){
loadCount -=1;
if (loadCount==0){
callback();
}
}
for ( var script in scripts){
if (!script.exitsts()){
loadCount +=1;
jQuery.getScript(script.url, done);
}
}
}
This function takes an array of scripts that are required and makes sure all of them are interpreted before it calls the callback().
The "script" class:
function script(url, testFunc){
this.url =url;
this.testFunction = testFunc;
this.exists = function(){
if(typeof(testFunction)=="function"){
return true;
}
else{
return false;
}
}
}
Where the test-function is a function that is defined (only) in the concerned script.
PS:
To enable caching in JQuery and thus prevent the browser from doing a GET request every time getScript() is called, you can use one of the methods that are presented here.
Even though unnecessary GET - requests are avoided, the script is still getting interpreted every time getScript() is called. This might sometimes be the desired behavior. But in many cases, there is no need to re-interpret library functions. In these cases it makes sense to avoid calling getScript() if the required library functions are already available. (As it is done in this example with script.exists().
How do I troubleshoot the following error being thrown by a Microsoft AJAX JavaScript framework method? It is an automatically generated line of JavaScript from a custom User Control in a Web Forms App (Sitefinity 5 CMS)
Error Message:
Unable to get property 'FancyBlockDesigner' of undefined or null reference
Here is the JavaScript that is throwing the error:
Sys.Application.add_init(function() {
$create(SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner, null, null, {"Editor":"propertyEditor_ctl00_ctl00_ctl00_ctl00_ctl00_Editor","propertyEditor":"propertyEditor"}, $get("propertyEditor_ctl00_ctl00_ctl00"));
});
Rather than discuss the ascx and cs files that try to abstract this detail away from me, I want to know what this error means. If I understand the detail, the abstraction might make more sense.
"$create" function in ASP.NET Ajax creates an instance of JavaScript class. Microsoft had their own opinion on how to make JavaScript object orientated and as time had shown, their approach wasn't exactly perfect.
Anyhow, to try to explain what is happening, let me give a bit of an overview oh how it works. We start by a server side control which implements IScriptControl interface which mandates two members: GetScriptDescriptors and GetScriptReferences. The second one is pretty straightforward - it lets you register references to all JavaScript files that you control will require. The GetScriptDescriptors, on the other hand, let's you define all the instances of JavaScript classes you want to use as well as it lets you set their properties - initialize them, if you will.
What the autogenerated JavaScript code you've pasted says is basically that you have defined in GetScriptDescriptors that you will need an instance of type "SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner" where you want Editor property to be initialized. This code will go and look for a JavaScript constructor that looks like this:
function SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner(element) {
}
that most probably also has a prototype defined, something like:
SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner.prototype = {
}
Now, since the error you have posted states: "Unable to get property 'FancyBlockDesigner' of undefined or null reference", most probably one of the following is the problem:
You have not included the JavaScript file which contains the class (constructor + prototype) that I've talked about above
You have forgot to add the "FancyBlockDesigner" to the constructor (it seems that you do have other object, perhaps through MS Ajax namespaces - "SitefinityWebApp.Esd.TheLab"
You have not registerd the "SampleHtmlEditor" namespace. Make sure at the top of your JS file you have this: Type.registerNamespace("SitefinityWebApp.Esd.TheLab.SampleHtmlEditor");
So, short story long, the function with name "SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner" cannot be found.
Hope this helps,
Ivan