Date post: | 13-Aug-2015 |
Category: |
Education |
Upload: | katja-hollaar |
View: | 369 times |
Download: | 1 times |
StudentEditor
Teacher
Video
Audio
Shape
Gallery
Exercise
Shared pin
Link
Bookmark
Document
Image with hotspots
Pin
Book
Note
Drawing
Text annotation
Navigator
Notebook
User
INTRODUCING EDITOR 34 var vm = new Vue({ 35 el: $editor[0], 36 37 data: {}, 45 46 computed: { 47 title: function() { 48 return _i8n.s(this.iType); 50 } 57 }, 58 59 methods: { 60 save: function() { 61 me.save(); 62 }, 68 cancel: function() { 69 me.closeEditor(); 70 } 71 } 72 });
PINS CONSTRUCTOR printNotes: function(pageNr, type, userId) { var toPrint = this.storeFilter(pageNr, type, userId); for(var i=0;i<toPrint.length;i++) { var prikker = new Prikker(toPrint[i], pageNr, type); } }
case enums.noteTypes.SHAPE: this.enrichmentMarker = new ShapeMarkerPrikker(this);
}
switch(this.type) {
instantiateAttachmentsForMarker(this);
if(!this.$el.hasClass('active')) { this.showAllAttachments(); } else { this.hideAllAttachments(); }
var textMarkerForm = Vue.extend({ template: require('html!./text-marker-form.html'), twoWay: true, deep: true, data: function(){ return { hasBackground: true, lineHeightValid: true }; }, methods: function(){
…Vue.component(‘text-marker-form', textMarkerForm);
<text-marker-form v-with="enrichment: enrichment”></text-marker-form>
require('./marker-forms/text-marker-form/text-marker-form.js');// Editor
VUE.JS COMPONENTS
THE LEARNINGS
• Simple interface - complex to develop
• Reducing complexity by splitting the code
• Advantage of component-based development