[Prototype] Backbone Sub Vue

app/core/Router.coffee

@@ -312,7 +312,7 @@ module.exports = class CocoRouter extends Backbone.Router
         console.debug("Skipping route in Backbone - delegating to Vue app")
         return
       else if options.vueRoute  # Routing to a vue component using VueComponentView
-        vueComponentView = require 'views/core/VueComponentView'
+        vueComponentView = require 'app/views/core/VueComponentView'
         view = new vueComponentView(ViewClass.default, options, args...)
       else
         view = new ViewClass(options, args...)  # options, then any path fragment args

app/views/core/SubVueComponentView.js

@@ -0,0 +1,55 @@
+import CocoView from 'views/core/CocoView'
+import store from 'core/store'
+
+const silentStore = { commit: _.noop, dispatch: _.noop }
+
+export default class VueComponentView extends CocoView {
+  constructor (options) {
+    super(options)
+
+    if (!this.VueComponent) {
+      throw new Error('Class must be initialized with VueComponent')
+    }
+
+    this.props = {}
+  }
+
+  getMountPoint() {
+    return this.$el[0]
+  }
+
+  buildVueComponent() {
+    return new this.VueComponent({
+      el: this.getMountPoint(),
+      propsData: this.props,
+      store: store
+    })
+  }
+
+  setState (state = {})  {
+    for (const key of Object.keys(state)) {
+      Vue.set(
+        this.props,
+        key,
+        state[key]
+      )
+    }
+  }
+
+  afterRender () {
+    if (!this.vueComponent) {
+      this.vueComponent = this.buildVueComponent()
+    }
+
+    this.props = this.vueComponent.$props
+
+    super.afterRender()
+  }
+
+  destroy() {
+    super.destroy()
+
+    this.vueComponent.$destroy()
+    this.vueComponent.$store = silentStore
+  }
+}

app/views/core/VueComponentView.js

@@ -1,4 +1,3 @@
-
 // This is the base backbone view to render any VueComponent.
 // Pass the vue component, propsData, base template into the constructor
 
@@ -10,14 +9,16 @@ const silentStore = { commit: _.noop, dispatch: _.noop }
 module.exports = class VueComponentView extends RootView {
   constructor (component, options) {
     super(options)
+
     const baseTemplate = options.baseTemplate || 'base-flat'  //base template, by default using base-flat
     this.id = 'vue-component-view'
+
     try {
       this.template = require('templates/'+ baseTemplate)
-    }
-    catch (err) {
+    } catch (err) {
       console.error("Error in importing the base template.", err)
     }
+
     this.VueComponent = component
     this.propsData = options.propsData
   }
@@ -30,19 +31,32 @@ module.exports = class VueComponentView extends RootView {
     })
   }
 
+  setState (state = {})  {
+    for (const key of Object.keys(state)) {
+      Vue.set(
+        this.props,
+        key,
+        state[key]
+      )
+    }
+  }
+
   afterRender() {
     if (this.vueComponent) {
       this.$el.find('#site-content-area').replaceWith(this.vueComponent.$el)
-    }
-    else{
+    } else {
       this.vueComponent = this.buildVueComponent()
       window.rootComponent = this.vueComponent
     }
 
+    this.propsData = this.vueComponent.$props
+
     super.afterRender()
   }
 
-  destroy() {
+  destroy () {
+    super.destroy()
+
     this.vueComponent.$destroy()
     this.vueComponent.$store = silentStore
   }

app/views/play/level/LevelGoals.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   div
-    // TODO: Split this into two components, one the ul, the other the goals-status 
+    // TODO: Split this into two components, one the ul, the other the goals-status
     ul#primary-goals-list(dir="auto")
       level-goal(
         v-for="goal in levelGoals",
@@ -18,7 +18,7 @@
         :goal="goal",
         :state="goalStates[goal.id]",
       )
-      
+
     div.goals-status.rtl-allowed(v-if="showStatus")
       span {{ $t("play_level.goals") }}
       span.spr :
@@ -36,16 +36,32 @@
   LevelGoal = require('./LevelGoal').default
 
   module.exports = Vue.extend({
-    props: ['showStatus']
-
-    data: -> {
-      overallStatus: ''
-      timedOut: false
-      goals: [] # TODO: Get goals, goalStates from vuex
-      goalStates: {}
-      casting: false
-    },
-
+    props: {
+        showStatus:
+          type: Boolean
+          default: false
+
+        overallStatus:
+          type: String
+          default: ''
+
+        timedOut:
+          type: Boolean
+          default: false
+
+        goals:
+          type: Array
+          default: []
+
+        goalStates:
+          type: Object
+          default: {}
+
+        casting:
+          type: Boolean
+          default: false
+    }
+
     computed: {
       classToShow: ->
         classToShow = 'success' if @overallStatus is 'success'
@@ -94,15 +110,15 @@
       color: rgb(245, 170, 49)
     .running
       color: rgb(200, 200, 200)
-  
+
   ul
     padding-left: 0
     margin-bottom: 0
     color: black
 
     body[lang="he"] &, body[lang="ar"] &, body[lang="fa"] &, body[lang="ur"] &
       padding-right: 0
-  
+
   #concept-goals-list
     margin-left: 20px
 

app/views/play/level/LevelGoalsView.coffee

@@ -1,5 +1,5 @@
 require('app/styles/play/level/goals.sass')
-CocoView = require 'views/core/CocoView'
+SubVueComponentView = require('views/core/SubVueComponentView').default
 template = require 'templates/play/level/goals'
 {me} = require 'core/auth'
 utils = require 'core/utils'
@@ -10,7 +10,9 @@ LevelGoals = require('./LevelGoals').default
 store = require 'core/store'
 
 
-module.exports = class LevelGoalsView extends CocoView
+module.exports = class LevelGoalsView extends SubVueComponentView
+  VueComponent: LevelGoals
+
   id: 'goals-view'
   template: template
   className: 'secret expanded'
@@ -37,17 +39,15 @@ module.exports = class LevelGoalsView extends CocoView
   constructor: (options) ->
     super options
     @level = options.level
-
-  afterRender: ->
-    @levelGoalsComponent = new LevelGoals({
-      el: @$('.goals-component')[0],
-      store
-      propsData: { showStatus: true }
-    })
+
+    @setState({ showStatus: true })
+
+  getMountPoint: ->
+    return @$('.goals-component')[0]
 
   onNewGoalStates: (e) ->
-    _.assign(@levelGoalsComponent, _.pick(e, 'overallStatus', 'timedOut', 'goals', 'goalStates'))
-    @levelGoalsComponent.casting = false
+    @setState(_.pick(e, 'overallStatus', 'timedOut', 'goals', 'goalStates'))
+    @setState({ casting: false })
 
     firstRun = not @previousGoalStatus?
     @previousGoalStatus ?= {}
@@ -68,7 +68,7 @@ module.exports = class LevelGoalsView extends CocoView
 
   onTomeCast: (e) ->
     return if e.preload
-    @levelGoalsComponent.casting = true
+    @setState({ casting: true })
 
   onSetPlaying: (e) ->
     return unless e.playing