Rails Vue.js Vue.js Meetup 2015-01-28 @kazupon
About Me @kazupon CUUSOO SYSTEM Vue.js Plugin vue-i18n: https://github.com/kazupon/vue-i18n vue-validator: https://github.com/kazupon/vue-validator
Vue.js
Vue.js
HTML UX jquery Ajax Javascript CSS Rails Sprockets
MVC UI/UX UI
Rails & data-* Controller # Javascript $(document).ready(function () { var module = constantnize($( body ).data( controller-name )); if (module) { module.init(); } }); # HTML template <html> <body data-controller-name= <%= contoller.controller_name %> ></doby> </html>
jquery & DOM $('body.projects').on('focus', 'textarea', function () { var value = $(this).val().split( \n ); var value_row = 0; $.each(value, function(i, val) { value_row += Math.max(Math.ceil(val.length / self.cols), 1); }); var input_row = $(this).attr('rows'); var original_row = $(this).data('default_row'); var next_row = (input_row <= value_row)? value_row + 0 : Math.max(value_row + 1, original_row); $(this).attr('rows', next_row); });
Vue.js http://vuejs.org
Vue.js
jquery UI
Vue.js DOM UI CommonJS
Vue.js
ViewModel Vue.js Web Vue.js Vue.extend module.exports var Modal = module.exports = Vue.extend({ template: require('./modal.html'), components: { }, data: function () { return { title: '', } }, methods: { show: function () { }, hide: function () { }, onclickclose: function (e) { } } }); component system: http://vuejs.org/guide/components.html
ViewModel Vue.extend Vue.component require components v-component v-ref # ViewModel var Widget = module.exports = Vue.extend({ template: require('./widget.html'), components: { modal: require('../modal') }, methods: { onclickopenmodal: function () { this.$.modal.show(); }, } }); # View <div class= widget > <div v-component="modal" v-ref="modal"></div> </div>
ViewModel TODO ViewModel API conflict namespace v0.11.4 v-events $emit 1 events: { ChildWidget:remove : function (vm, index) { // remove the item from the item collection // }) } onclickremoveitem: function (event, index) { this.$dispatch( ChildWidget:remove, event.targetvm, index ); }) dispatch x onclickremoveitem: function (event, index) { this.$dispatch( ChildWidget:remove, event.targetvm, index ); })
Template View Template(html) require # Tempalte <div class= widget > <div v-component="modal" v-ref="modal"></div> </div>
Filter Filter ViewModel module.exports require Filter Component ViewModel Vue.filter require filters # Filter module module.exports = { required: function required (val) { return!val? false : true; }, }; # ViewModel var filters = require(./filters ); var Invitation = module.exports = Vue.extend({ template: require('./invitaion'), filters: { validaterequired: function (val) { this.validation.email = filters.required(val); return val; }, } });
Resource plugin (superagent) WebAPI end-point resource var request = require('superagent-browserify'); module.exports = list; function list (params, fn) { params = params {}; var endpoint = /api/v1/xxx ; // } request.get(endpoint).query(params).withcredentials().end(fn); superagent: http://visionmedia.github.io/superagent/
Plugin vue-i18n: cookie locale v-t Vue.t Rails i18n like key # Entrypoint var cookie = require('cookie-cutter'); var Vue = require('vue'); var i18n = require('vue-i18n'); // locale setting var locale = cookie.get('locale') en ; Vue.use(i18n, { lang: locale, locales: { en: require('./locales/en.json'), ja: require('./locales/ja.json') } }); # Tempalte <div> <p v-t= foo.bar"></p> </div> vue-i18n: https://github.com/kazupon/vue-i18n
Vue.js app/ assets/javascripts.!"" Capfile!"" Gemfile!"" Gemfile.lock!"" README.md!"" Rakefile!"" app!"" config!"" config.ru!"" db!"" frontend!"" lib!"" log!"" public!"" script!"" spec #"" vendor
Vue.js - - UI - API -.!"" Makefile!"" gulpfile.js!"" index.js!"" lib $!"" api $ $!"" utils.js $!"" validates.js $ #"" widgets!"" locales $!"" en.json $ #"" ja.json #"" package.json
Gulp + Browserify JS JS app/assets/ javascripts application.js require Sprockets.!"" app $!"" assets $ $!"" images $ $!"" javascripts $ $ $!"" application.js $ $ $!"" bundle.js $ $ $ $ $ $ #"" zzz.js $ $ #"" stylesheets!"" frontend $!"" Makefile $!"" gulpfile.js $!"" index.js $!"" lib $ $!"" api $ $ $ $!"" utils.js $ $!"" validates.js $ $ #"" widgets $!"" locales $ $!"" en.json $ $ #"" ja.json $ #"" package.json
Rails Controller script require ViewModel JSON data # erb template <div id="widgets" v-cloak v-repeat="item: items" v-component="widget-item"></div> <script> (function () { var Widget = require('bundle').widget; var data = JSON.parse('<%= j(object.to_json).html_safe %>'); new Widget({ el: '#widgets', data: data }); })();
Vue.js Component - - Vue.js Component
Vue.js Component - Vue.js Component
jquery Vue.js
Vue.js UI Model $data Vue.render