Vue.js & Backbone.Model

by NesterOne

HTML

<script src="https://cdn.rawgit.com/yyx990803/vue/0.11.0-rc/dist/vue.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<span>Vue Example</span>
<div id="vue">
    <p>{{name}}</p>
    <input v-model="name"/>
    <button v-on="click: alertName">alert model name</button>
    <button v-on="click: setName">set model name</button>
</div>
<span>Backbone Example</span>
<div id="backbone">
    <p>{{name}}</p>
    <input class="input input-text"/>
    <button class="button button-alert">alert model name</button>
    <button class="button button-model">set model name</button>
</div>

JavaScript

var model = new Backbone.Model({
    name: 'foo'
});

var view = new Backbone.View.extend({
});


var vm = new Vue({
    el: '#vue',
    data: model.toJSON(), // make a shallow copy
    created: function () {
        var self = this
        Object.keys(this.$data).forEach(function (key) {
            // setup two-way sync between
            // the vm and the Backbone model
            self.$watch(key, function (val) {
                model.set(key, val)
            })
            model.on('change:' + key, function (model, value) {
                self[key] = value
            })
        })
    },
    methods: {
        alertName: function () {
            alert(model.get('name'))
        },
        setName: function () {
            model.set('name', 'change from model')
        }
    }
})