ko-vs-vue.md

ES5 Example

Vue 2.0-rc (native template)

new Vue({
    el: '#app',
    data: {
        variable1: 23,
        variable2: 42
    },
    methods: {
        some: function() {
            console.log(this.variable1, this.variable2);
        }
    }
});

Native template engine

<section id="app">
    <div>{{ variable1 }}</div>
    <div>{{ variable2 }}</div>
    <a href="#" @click="some">Do something!</a>
</section>

Knockout (Punches template engine)

ko.applyBindings({
    // Data
    variable1: 23,
    variable2: 42,
    // Methods
    some: function() {
        console.log(this.variable1, this.variable2);
    }
}, document.getElementById('app'));

Punches template engine

<section id="app">
    <div>{{ variable1 }}</div>
    <div>{{ variable2 }}</div>
    <a href="#" data-bind="click: some">Do something!</a>
</section>

ES6 Example

Vue 2.0-rc

new Vue({
    el: '#app',
    data: {
        variable1: 23,
        variable2: 42
    },
    methods: {
        some: () => {
            console.log(this.variable1, this.variable2);
        }
    }
});

Knockout

class MyViewModel {
    constructor() {
        this.variable1 = 23;
        this.variable2 = 42;
    }

    some() {
        console.log(this.variable1, this.variable2);
    }
}

ko.applyBindings(new MyViewModel, document.getElementById('app'));

ES7 Example

Vue 2.0-rc

// Similar with ES6

Knockout

class MyViewModel {
    variable1 = 23;
    
    variable2 = 42;
   
    some() {
        console.log(this.variable1, this.variable2);
    }
}

ko.applyBindings(new MyViewModel, document.getElementById('app'));

Observers

Vue 2.0-rc

new Vue({
    el: '#app',
    data: {
        value: 0
    },
    methods: {
        increment: () => {
            this.value++;
        }        
    }
})

Knockout

class MyViewModel {
    value = ko.observable(0);
    
    increment() {
        this.value(this.value() + 1);
    }
}

ko.applyBindings(new MyViewModel, document.getElementById('app'));

Components

Vue 2.0-rc

Vue.component('todo', {
  template: '<li>This is SPARTAAAAA</li>'
})

Native template engine

<ul>
    <todo v-for="todo in todos"></todo>
</ul>

Knockout

 // Just nothing

Punches template engine

// Use script tag for make template invisble with prerender
// U can use React virtual dom if you want or something else
<script type="text/html" id="todo">
    <li>This is SPARTAAAAA</li>
</script>

<ul data-bind="foreach: todos">
    {#template: todo}{/template}
</ul>

Attributes

Vue 2.0-rc: Native template engine

<div v-bind:id="someId" v-bind:disabled="isDisabled"></div>

Knockout

// Punches tpl engine
<div id="{{ someId }}" disabled="{{ isDisabled }}"></div>

Inputs + filter data

Vue 2.0-rc: Native template engine

<input v-model.trim="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

Knockout: Punches template engine

<input value="{{ message | trim }}" placeholder="edit me" />
<p>Message is: {{ message }}</p>