We Keep Coding

vue.js app.$destroy() does not remove app instance

I am learning vue js. I have an app called growler. I am trying to call $destroy method on-click of button.
<button id="destroyButton" class="btn btn-danger" v-on:click="onDestroyClick">Destroy</button>
If I have method as part of Javascript event, it is working.
<script type="text/javascript">
document.getElementById('destroyButton').addEventListener('click', function() {
growler.$destroy();
});
</script>
But, if I call this method as part of vue on-click event, it is not working.
methods: {
onDestroyClick: function() {
this.$destroy();
}
}
I am having lifecycle hooks for different events of the instance. I am trying to log them in the console.
beforeDestroy: function() {
console.log('beforeDestroy');
},
destroyed: function() {
console.log('afterDestroy');
}
This is working fine from Javascript Event listener. I am able to see Destroy messages in the console log.
Can you please tell, why it is not working as part of on-click event method. App instance is not destroyed.

Adding the answer here, as it was just mentioned in the comments.
It was a problem with bracces. The code is pasted below:
The corresponding jsfiddle is here
var growler = new Vue({
el: '#growler',
data :
{
message : "test"
},
methods: {
onDestroyClick: function() {
this.$destroy();
}
},
beforeDestroy: function() {
console.log('beforeDestroy');;
},
afterDestroy: function() {
console.log('afterDestroy');
}
});

Using Masonry.JS and Vue.JS

I know how to use masonry.js apart from vue. However, I'm having issue getting it to function and be called correctly inside of the vue framework. I called it inside of the created or ready but neither seem to get the grid to form correctly. How can i get this to work inside the framework? Oh and I do have jquery called in the html before this script. Here is what I have inside the component :
Edit:
I can see that the masonry is effecting the grid by assigning its height with JS and changing the items to position absolute. However, its not placing them correctly. Its stacking them ontop eachother instead of sideby side like it should be in the grid.
<template>
<div class="projects--container">
<div class="inner-section inner--options">
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</div>
</div>
</template>
<script>
export default{
ready: function () {
this.mason();
},
data: function () {
return {
options: [
{
option: 'projects',
phrase: 'for clients',
slogan: 'slogan...'
},
{
option: 'sides',
phrase: 'for us',
slogan: 'we love what we make'
},
{
option: 'moments',
phrase: 'with the crew'
}
]
}
},
methods: {
revert: function () {
this.$dispatch('return-home', true)
},
mason: function () {
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 250
});
$grid.masonry('layout');
}
},
events: {
'option-select': function (option) {
}
}
}
</script>

As I saw it, most mv* frameworks like vue keep DOM elements (view) in sync with js (model), in the other hand, frameworks like masonry just need valid DOM to work.
So, the tricky part is to tell one to another when DOM has changed.
So the first change is when vue finished to render all DOM, as mentioned in other answers, we are notified on mounted lifecycle hook, here is where we can initialize masonry
mounted() {
let grid = document.querySelector('.grid');
this.msnry = new Masonry(grid, {
columnWidth: 25
});
},
In any other change to our view need also update masonry as well, if you change items size use layout() method, if you add or remove items use reloadItems() method
methods: {
toggle(item) {
item.isGigante = !item.isGigante;
Vue.nextTick(() => {
// DOM updated
this.msnry.layout();
});
},
add() {
this.items.push({
isGigante: false,
size: '' + widthClasses[Math.floor(Math.random() * widthClasses.length)] + ' ' + heightClasses[Math.floor(Math.random() * heightClasses.length)]
});
Vue.nextTick(() => {
// DOM updated
this.msnry.reloadItems();
this.msnry.layout();
});
}
}
Please note that those methods are called after vue has completed DOM update using Vue.nextTick function.
Here is a working fiddle.

I guess the vue-way of doing this is by using refs. Just assign a ref property to your html element inside the template and access it using the vm.$ref instance property inside the mounted callback.
A sample code may look like this:
<template>
<div class="grid" ref="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</template>
<script>
import Masonry from "masonry"; // or maybe use global scoped variable here
export default {
mounted: function(){
let $masonry = new Masonry(this.$refs.grid, {
// masonry options go in here
// see https://masonry.desandro.com/#initialize-with-vanilla-javascript
});
}
}
</script>

In Vue2, there is no such thing as a ready lifecycle hook. Instead, the mounted lifecycle hook is triggered once the instance is "ready" in the way you think of.
Reference: https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

It could be that the vertical stack just indicates that masonry is not working (It's hard to tell without a codepen/plunkr). #riyaz-ali has the right idea though.

you must call masonry inside mounted() event to make it work.
i am using this on my project (with imagesloaded) its work perfectly
massonryApply (container, context, selector) {
container = $(`#${container}`)
const $grid = container.imagesLoaded(function () {
$grid.masonry({
itemSelector: `.${selector}`,
percentPosition: true,
columnWidth: `.${selector}`
})
$grid.masonry('reloadItems')
})
}

Listen to custom event in Vue.js

Vue.js works great with browser events such as click or mousedown. But not work at all with custom events. Here is the code:
HTML:
<div id="app" style="display: none" v-show="true">
<div v-el:ping v-on:ping="ping">
<div>
<button v-on:click="click">Click</button>
</div>
</div>
</div>
JavaScript:
new Vue({
el: '#app',
data: {
},
methods: {
ping: function (event) {
console.log('Vue ping', event);
alert('Vue ping');
},
click: function (event) {
jQuery(event.target).trigger('ping');
}
},
ready: function () {
console.log(this.$els);
jQuery(this.$els.ping).on('ping', function (event) {
console.log('jQuery ping', event);
alert('jQuery ping');
});
}
});
I expect alert with Vue ping and jQuery ping. But only the later pops up.
CodePen

Vue has its own internal system for custom events, which you should use instead of jQuery / native DOM events:
click: function (event) {
// jQuery(event.target).trigger('ping');
this.$dispatch('ping', event.target) // send event up the parent chain, optionally send along a reference to the element.
// or:
this.$emit('ping') // trigger event on the current instance
}
Edit: $dispatch is for parent-child communication, You seem to want to trigger a custom event from within the same comonent. In that case, you could instead simply call a method.
If you still want to listen to a custom event inside the same component, you:
want to use $emit
cannot use v-on:custom-event-name in the template (that's only to be used on components). Rather, add the event method to the events::
events: {
ping: function() {....}
}

Here it is in vanilla JS:
HTML:
<div id="app">
<div v-el:ping>
<div>
<button v-on:click="click">Click</button>
</div>
</div>
</div>
JS:
(function() {
new Vue({
el: '#app',
data: {
event: null
},
methods: {
ping: function(event) {
alert('Vue ping');
},
click: function(event) {
this.$els.ping.dispatchEvent(this.event);
}
},
ready: function() {
this.event = document.createEvent("HTMLEvents");
this.event.initEvent("ping", true, true);
this.$els.ping.addEventListener('ping', this.ping);
}
});
})();
pen: http://codepen.io/anon/pen/wGdvaV?editors=1010#0

You should avoid to mix a dom events and vue-components related ones because it's a different layers of abstraction.
Anyway, if you still want to do that, I think you need to cache this.el inside a vue-component instance or take it via computed-property like this
{
computed : {
jqueryEl(){ return $(this.el) }
}
}
And then trigger a custom jQuery events by this.jqueryEl.trigger('ping').
Sure to properly take care of keep the element's bindings up to date!
For example you can bind jQuery events dynamically (and also unbind on component destroy!) like this:
ready : function(){
jQuery('body').on('ping.namespace', '[data-jquery="ping"]', function(){ ... })
},
destroy : function(){
jQuery('body').off('ping.namespace')
}
And don't forget to add attribute [data-jquery="ping"] to an element which you would like to response a ping event.
Hope this information helps you to achieve the expected result.

ember.js custom component or view

I'm attempting to create a reusable typeahead component(?) for my app. I'm using twitter's typeahead javascript library and trying to create a custom component/view out of it.
I would like to be able to define the typeahead in my templates like so:
{{view App.TypeAhead name=ta_name1 prefretch=prefetch1 template=template1 valueHolder=ta_value1}}
I was thinking those variables would be located in the controllers:
App.ApplicationController = Ember.Controller.extend({
ta_name1: 'movies',
prefetch1: '../js/stubs/post_1960.json',
template1: '<p><strong>{{value}}</strong> - {{year}}</p>',
ta_value1: null
});
I don't know what i need to use to accomplish this, a component or a view. I would imagine it would something like this.
App.Typeahead = Ember.View.extend({
templateName: 'typeahead',
didInsertElement: function() {
$('.typeahead').typeahead([{
name: this.getName(),
prefetch: this.getPrefetch(),
template: this.getTemplate(),
engine: Hogan,
limit: 10
}]);
$('.typeahead').on('typeahead:selected', function(datum) {
this.set('controllers.current.' + this.getValueHolder()), datum);
});
}
});
With a template like
<script type="text/x-handlebars" data-template-name='typeahead'>
<input class="typeahead" type="text">
</script>
I don't know how to get away from the jQuery class selector. In reality, i will have more than one typeahead on a form so this class selection isn't going to cut it.
I also don't know how to get the values from the controller in the View. Obviously the getPrefetch(), getTemplate(), getValueHolder(), etc methods don't exist.
I know this is a TON of pseudo code but hopefully i can get pointed in the right direction.

You probably want to use a component for this.
The secret afterwards is that Ember components (and View) expose a this.$ function which is a jQuery selector scoped to the current view. So you only need to do this:
didInsertElement: function() {
this.$(".typeahead"); // ... etc
}

Take a look at my Twitter TypeAhead implementation for Ember.
you can use it like this:
APP.CardiologistsTypeAhead = Bootstrap.Forms.TypeAhead.extend({
dataset_limit: 10,
dataset_valueKey: 'id',
dataset_engine: Bootstrap.TypeAhead.HandlebarsEngine.create(),
dataset_template: '<strong>{{lastName}} {{firstName}}</strong>',
dataset_remote: {
url: '%QUERY',
override: function (query, done) {
$.connection.cardiologists.server.getAllByLastNameLike(query) //SignalR
.then(function (cariologists) {
done(cariologists);
});
}
},
didInsertElement: function () {
this._super();
var self = this;
Em.run.schedule('actions', this, function () {
var cardiologistFullName = this.get('controller.content.cardiologistFullName');
self.get('childViews')[1].$().val(cardiologistFullName);
});
},
valueChanged: function () {
this._super();
this.get('childViews')[1].$().typeahead('setQuery', this.get('controller.content.cardiologistFullName'));
}.observes('value'),
selected: function (cardiologist) {
var cardiologistFullName = '%# %#'.fmt(Em.get(cardiologist, 'lastName'), Em.get(cardiologist, 'firstName'));
this.set('controller.content.cardiologistFullName', cardiologistFullName);
this.set('value', Em.get(cardiologist, 'id'));
}
});
and the handlebars:
{{view APP.CardiologistsTypeAhead
classNames="col-sm-6"
label="Cardiologist:"
valueBinding="controller.content.referrerCardiologist"}}

Marionette best way to do self render

Hello here is my little code :
i don't know how to make this more marionette ... the save function is too much like backbone...
self.model.save(null, {
success: function(){
self.render();
var vFormSuccess = new VFormSuccess();
this.$(".return").html(vFormSuccess.render().$el);
}
var VFormSuccess = Marionette.ItemView.extend({
template: "#form-success"
} );
http://jsfiddle.net/Yazpj/724/

I would be using events to show your success view, as well as using a layout to show your success view, if it's going into a different location.
MyLayout = Marionette.Layout.extend({
template: "#layout-template",
regions: {
form: ".form",
notification: ".return"
}
initialize: function () {
this.listenTo(this.model,'sync',this.showSuccess);
this.form.show(new FormView({model: this.model}));
},
showSuccess: function () {
this.notification.show(new VFormSuccess());
}
});
Or, you could do the same with just the one region, and having the FormView be the layout itself. You just need to ensure there is an element matching the notification region exists in the layout-template.
MyLayout = Marionette.Layout.extend({
template: "#layout-template",
regions: {
notification: ".return"
}
initialize: function () {
this.listenTo(this.model,'sync',this.showSuccess);
},
showSuccess: function () {
this.notification.show(new VFormSuccess());
}
});
What this allows you to do:
You can then show an error view quite easily, if you wanted. You could replace initialize with
initialize: function () {
this.listenTo(this.model,'sync',this.showSuccess);
this.listenTo(this.model,'error',this.showError);
},
and then add the following, ensuring you create a VFormError view.
showError: function () {
this.notification.show(new VFormError());
}

You should be able to write
self.model.save(null, {
success: function(){
self.render();
}
...
Why are you doing this
this.$(".return").html(vFormSuccess.render().$el);
If you define that template as the view template you could simply refer to it with $el, if you need two different templates then you might think about using a Controller, to decide what to use and who to use it.

If you use Marionette, you don't call render directly but instead use Marionette.Region to show your views.