Skip to content

Instantly share code, notes, and snippets.

What would you like to do?

This is transolation written by me as Japanese about Vue.js

データバインディングについてVue.jsと Backbone.stickitを比較する - mizchi's blog

My Engilish is not so good. So please teach me what to say is better.

This is resource to suite to use vue.js againt my compony so I blame Backbone.stickit :D



Comparison CompBackbone.stickit and Vue.js

This example code theme is "When user click #menu, DOM move to left 100". template function is something jade template exapander.

In case of Backbone.stickit

class MenuView extends Backbone.View
  initialize: ->
    @model = new Backbone.Model()

  render: ->
    @$el.html template("""

      observe: 'positionX'
      update: ($el, model, val) ->
        $el.css 'left', val


it 'should move to left 100', ->
  menu = new MenuView
  expect(menu.model.get 'positionX').eq 100


  • Watching target for Backbone.stickit is DOM
  • Depends on 'on chagnge' of Backbone.Model, so it can't hadle nested model (common problem of Backbone.Model)
  • Procedures exist view and model ant it makes code buggy.
  • jQuery in update controll is free and controllable for user but makes code buggy.

In case of Vue.js

Menu = Vue.extend
    template """
      #menu(style="left: {{positionX}}px" v-on="click: move")
    positionX: 0
    move: ->
      @$data.positonX = 100


it 'should move to left 100', ->
  menu = new Menu
  expect(menu.$data.positionX).eq 100

In this case, menu.$data correspond to Backbone.View's model and Vue's view is under controll by Vue's ViewModel. It covers view controlls and hide from user.


  • fewer steps and stateful, not procedural
  • ViewModel(Vue) covers View
  • template is intuitive

Hidden view becomes code less and controllable as pure javascript object. And we can avoid DOM manipulation.

I have no expericen to write reusable view combinated with DOM. Cohesive is better when web page building.

What I want to say

  • Hidden view under view model is good.
  • Backbone.Model's get/set looks odd.
  • I don't want to use view model's parameter as special.

Comparison from Angular

Angular is too huge, difficult to learn, and have dirty DSL.(for me)


This comment has been minimized.

Copy link

@yyx990803 yyx990803 commented Feb 18, 2014

would you mind I rephrase it before sharing?


This comment has been minimized.

Copy link

@yyx990803 yyx990803 commented Feb 18, 2014

I have edited the English version here:
Please let me know if I misunderstood anything.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment