Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

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

データバインディングについてVue.jsと Backbone.stickitを比較する - mizchi's blog http://mizchi.hatenablog.com/entry/2014/02/18/163721

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

vue.js http://vuejs.org/

backbone.stickit http://nytimes.github.io/backbone.stickit/

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()

  render: ->
    @$el.html template("""
      #menu.js-open
    """)
    @stickit()

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

Testing

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

Problems

  • 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:
    template """
      #menu(style="left: {{positionX}}px" v-on="click: move")
    """
  data:
    positionX: 0
  methods:
    move: ->
      @$data.positonX = 100

testings

it 'should move to left 100', ->
  menu = new Menu
  menu.move()
  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.

Merit

  • 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)

@yyx990803

This comment has been minimized.

Copy link

@yyx990803 yyx990803 commented Feb 18, 2014

would you mind I rephrase it before sharing?

@yyx990803

This comment has been minimized.

Copy link

@yyx990803 yyx990803 commented Feb 18, 2014

I have edited the English version here: https://gist.github.com/yyx990803/9073249
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