Develop Reference

Vue: Watch pathname to detect URL changes

So when it comes to url changes everyone on Stackoverflow seems to suggest using 'onhashchange', but no one even speaks about the fact that this event is - like it name says - only triggered if you use hashes. And I don't want to use random hashes in my URL.
So I am looking for a way to watch window.location.pathname to detect any change there. But Vue seems to only be able to watch its own properties. So how do I do this? Thank you!

Could try this: (should work only on history mode, will not work on hash mode)
mouted () {
window.addEventListener(
'popstate', this.handleHistoryChange
)
},
destroyed () {
window.removeEventListener(
'popstate', this.handleHistoryChange
)
}

Ember, generating URL `url-to`?

I would like to generate a URL to a resource and show it to the User. I found the link-to but I don't want the whole <a> element but only the URL.
Something like:
{{#url-to 'photos.show' photo}}

I am not sure what Emberjs version you are using but in any case this may work for you. I haven't try my self but probably will help you.
{{#url-to 'photos.show' photo}}
Ember.Handlebars.registerHelper('url-to', function() {
return Ember.Handlebars.helpers['link-to'].apply(this, args);
});
Check this tutorial which goes more in details. Also you can search for how to create blocs helpers in emebrjs.

there is addon which adds such helper {{href-to}} have a look https://github.com/intercom/ember-href-to

How do I change the separator of extraParams in an ExtJS store proxy?

I'm stuck with a problem related to the extraParams of an ExtJS store.. I need to change the default params separator & to a customized ; since the web service I'm accessing doesn't respond to &.
Is there a way to change the separator?
Bests, Andreas

There's nothing built in to ExtJS to allow customisation of the parameter separator - the use of '&' is a de-facto standard, after all.
However, you can change the default behaviour if you need to by overriding Ext.Object.toQueryString
Ext.define('Ext.override.CustomQueryString', {
override: 'Ext.Object',
toQueryString: function() {
var queryString = this.callParent(arguments);
return queryString.replace('&', ':');
}
})
Something like that would change behaviour globally. This may or may not be a good thing to do.

I found a workaround on the Sencha forums:
yourStore.proxy.url = 'your/url/' + yourParameter + ';.....';
With this line, before loading the store, it's possible to go around the extraParams and still pass them directly to the used proxy using the url field.

Use directive as value for ng-if?

In my application, I need to be able to easily determine whether a user is authenticated within my HTML and in all templates.
My first thought on how to do this was to create a "global" controller and apply it to which simply set $scope.isAuthenticated = $auth.isAuthenticated.
However, after doing some reading, I discovered that this wasn't considered good practice. Instead, I created a directive, which would just return $auth.isAuthenticated().
angular.module('HordeWebClient')
.directive('isAuthenticated', function($auth) {
return $auth.isAuthenticated();
});
And then in my templates, I figured I could just use .... This doesn't work, the element isn't rendered regardless of the state of $auth.isAuthenticated.
The Safari error console doesn't show any problems, so I'm stuck on where to start in fixing this. Any pointers would be greatly appreciated.

In my opinion you should use .run on your main module.
angular.module('app').run(function(){
if(!isAuthenticated){
redirectToLoginView();
}
});
More: https://docs.angularjs.org/guide/module

Meteor template applying jQuery plugin after rendered

I am displaying a collection of "messages" in my Meteor app. When my template "messages" is rendered, I apply this jQuery plugin called "gridalicious", which basically displays the messages in a pinterest-like format.
All works well, but when I insert a new message, that new message is displayed twice. When I refresh the browser, the duplicate is gone.
I'm applying the plugin as follow
Template.messages.rendered = ->
$("#message_box").gridalicious
width:250
animate:false
selector:".message"
gutter:0
Basically, if I get rid of this plugin, things messages display correctly, without any duplicates.
I'm not sure what would be causing this problem.

yes, i have similar prob like this. for this plugin or same satuation, to avoid it duplicates your template instance you can try make a global variable to handle your message box status, add some condition to decide if this new message's id is already been inside your global status handler and already been rendered, then don't render it twice.
global scope
isAlreadyBeenReneredId = null
Template instance of messages
Template.messages.rendered = ->
if isAlreadyBeenReneredId isnt #data._id
isAlreadyBeenReneredId = #data._id
options =
width: 250
gutter: 0
$("#message_box").gridalicious options
not real code, but some idea you might want to try.

As far as I know, Meteor does not render everything again and again, but only the differences. So I think the problem is, that you call the jQuery plugin multiple times on the same element.
I don't know the plugin, but there seems to be an append method, maybe this could be useful?

Try this:
if (Meteor.isClient) {
Meteor.startup(function () {
$(document).ready(function (){
$("#message_box").gridalicious({
width:250,
animate:false,
selector:".message",
gutter:0
});
});
});
}
Sorry I didn't know how to write the equivalent in coffescript.