JSFiddle starter for Vue.js

Do you want to create a JSFiddle to shoot out a quick Vue test, proof of concept or bug report?

Vue’s webpack setup gives you section dedicated for your templates.
Most JSFiddles I see have the template in the JS window using Vue’s template attribute.

I’ve prepared a fiddle that lets you use the HTML section.

Check it out:

Please, share your stuff in the comment below to show off your work!

LINK: JSFiddle starter for Vue.js

PS I don’t know why JSFiddle indents the code so weird.
It looks good when you open it on their site.

Guide: How to use Vue.js with jQuery Plugins

UPDATE

I’m not sure I can recommend that for vue2 anymore. I’m not sure what that solution would be but I would probably go for components now.

The original article is here:

Working with Vue can be awesome. But you might know that it can also give you headaches, when you try to combine it with jQuery plugins or other libraries.

The problem is that jQuery works fundamentally different than Vue. Vue renders everything based of the component’s core data. jQuery is mostly meant to do simple click handling and has powerful abilities manipulate the DOM.

When I looked for help myself I have found some unsatisfying solutions where components did do all the initialization work.
Let me show you how I would combine Vue.js and jQuery.

What’s the goal?

In most cases you can omit using jQuery and find a simple Vue based solution to your problem. Modals, sliders and so on are pretty simple with a Vue component and CSS.

So the goal is to use powerful jQuery plugins that cannot be written quickly in Vue.

We will …

… use Vue directives to build a bridge to jQuery.
… initialize the plugin when the element is attached.
… destroy it when the element is detached.
… send events to notify the component.
… receive events from the component and pass them to the plugin.

Continue reading →

6 Strategies to Keeping up with Web Development

JavaScript, CSS and HTML have evolved and are facing constant change. New frameworks, tools and services appear every month. Unfortunately, many web developers fear to lose the connection to web development that they used to have.

Some might even fear not being able to find a new job because they’ve never used Angular or don’t know anything about Webpack.

I experienced the same thing 3 years ago when everything I used to write was server side rendered with a sprinkle of CoffeeScript in a comfortable Rails environment.

“But, how can I keep up with all the new technology popping up?”

There is no direct answer, as there are a handful of ideas to what you can do to set yourself in a better position.

Let’s dive deeper.

Continue reading →

7 ways how to define functions in JavaScript

I remember that I was getting confused from time to time when I was learning JavaScript many years ago.

One of the strange things was how people used functions definitions in their code.
When I looked at code at code from friends or co-workers I quickly discovered that there are many ways how to create functions in JavaScript.

But I couldn’t figure out why people choose one over another.

This list will bring offers you a clear understanding of the benefits and downsides of each way.

You’ll write a lot of functions when you become a JavaScript developer.
Time to step up the game.
Continue reading →

Your Marionette.ItemView isn’t rendering the template?

If you’re new to MarionetteJS chances are you do the same mistake I did.

Not even the Marionette Gitter group could help me with this. It’s absurd that something that trivial could end up costing me hours of time to solve.

Let’s say you have a Marionette.CollectionView (or a Marionette.CompositeView, as it inherits from it) and a Backbone.Collection ready.

As soon as you pass this collection to a new Marionette.CollectionView, it should iterate over the collection and create a new ItemView for each item in the collection.

In my case it worked like 50%. A HTML Tag appeared for each model in the collection but it was empty.

Here is some supporting code:

class DemoApp.CompositeView extends Marionette.CompositeView
  childView: DemoApp.ItemView
  childViewContainer: 'tbody'
  tagName: 'table'
  template: '#composite-template'

class DemoApp.ItemView extends Marionette.View
  className: 'entry'
  tagName: 'tr'
  template: '#item-template'

  # won't be called
  onBeforeRender: -> console.log 'about to be rendered', @

  # won't be called
  onRender: -> console.log 'rendered', @

  # will be called, when added to a region
  onShow: -> console.log 'on show', @

class DemoApp.CompositeView extends Marionette.CompositeView

childView: DemoApp.ItemView

childViewContainer: 'tbody'

tagName: 'table'

template: '#composite-template'

class DemoApp.ItemView extends Marionette.View

className: 'entry'

tagName: 'tr'

template: '#item-template'

# won't be called

onBeforeRender: -> console.log 'about to be rendered', @

# won't be called

onRender: -> console.log 'rendered', @

# will be called, when added to a region

onShow: -> console.log 'on show', @

/* some content */

I’ve wondered why the onRender and onBeforeRender methods don’t work.

Double-check that you’ve extended from Marionette.ItemView instead of Marionette.View!

This mistake is easy to overlook and then hard to find because there won’t be helpful error logs.

Quote from the documentation:

Note: The Marionette.View class is not intended to be
used directly. It exists as a base view for other view classes
to be extended from, and to provide a common location for
behaviors that are shared across all views.

Marionette.View might be renamed to Marionette.AbstractView in version 3. It would then be more obvious that you shouldn’t extend it directly.

I hope you find this article if you google about Marionette.ItemViews’ templates not being rendered. It would have saved me hours of debugging.

Stay up to date with JavaScript.

Subscribe to get my latest articles by email.

Best,
Christian

Christian Gambardella

I write about JavaScript and Vue.js. I live in Berlin and work at Boxes.