see #1: add a Backbone structure

src/admin/class-helixware-mico-admin.php

@@ -27,7 +27,7 @@ class Helixware_Mico_Admin {
 	 *
 	 * @since    1.0.0
 	 * @access   private
-	 * @var      string    $plugin_name    The ID of this plugin.
+	 * @var      string $plugin_name The ID of this plugin.
 	 */
 	private $plugin_name;
 
@@ -36,21 +36,22 @@ class Helixware_Mico_Admin {
 	 *
 	 * @since    1.0.0
 	 * @access   private
-	 * @var      string    $version    The current version of this plugin.
+	 * @var      string $version The current version of this plugin.
 	 */
 	private $version;
 
 	/**
 	 * Initialize the class and set its properties.
 	 *
 	 * @since    1.0.0
-	 * @param      string    $plugin_name       The name of this plugin.
-	 * @param      string    $version    The version of this plugin.
+	 *
+	 * @param      string $plugin_name The name of this plugin.
+	 * @param      string $version The version of this plugin.
 	 */
 	public function __construct( $plugin_name, $version ) {
 
 		$this->plugin_name = $plugin_name;
-		$this->version = $version;
+		$this->version     = $version;
 
 	}
 
@@ -97,6 +98,11 @@ public function enqueue_scripts() {
 		 */
 
 		wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/helixware-mico-admin.js', array( 'jquery' ), $this->version, false );
+//		wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/admin.js', array(
+//			'jquery',
+//			'underscore',
+//			'backbone'
+//		), $this->version, false );
 
 	}
 

src/admin/js/src/admin.manifest.js

@@ -1,5 +1,12 @@
 var $ = jQuery;
 
 var helixware = window.helixware = window.helixware || {};
+helixware.model = helixware.model || {};
+helixware.controller = helixware.controller || {};
+helixware.view = helixware.view || {};
 
-helixware.controller.Test = require( './controllers/test-controller.js' );
+helixware.model.FaceDetectionFragment = require( './models/face-detection-fragment' );
+helixware.model.FaceDetectionFragments = require( './models/face-detection-fragments' );
+helixware.view.FragmentView = require( './views/fragment-view' );
+helixware.view.FragmentsView = require( './views/fragments-view' );
+helixware.controller.Test = require( './controllers/test-controller' );

src/admin/js/src/controllers/test-controller.js

@@ -1 +1,7 @@
-var x = 10;
+var x = 10;
+
+var fragments = new helixware.model.FaceDetectionFragments( [] );
+fragments.fetch();
+
+var fragmentsView = new helixware.view.FragmentsView( fragments );
+

src/admin/js/src/models/face-detection-fragment.js

@@ -0,0 +1,3 @@
+var FaceDetectionFragment = Backbone.Model.extend( {} );
+
+module.exports = FaceDetectionFragment;

src/admin/js/src/models/face-detection-fragments.js

@@ -0,0 +1,6 @@
+var FaceDetectionFragments = Backbone.Collection.extend( {
+    model: helixware.model.FaceDetectionFragment,
+    url: '/wp-admin/admin-ajax.php?action=hw_face_detection_fragments&id=191'
+} );
+
+module.exports = FaceDetectionFragments;

src/admin/js/src/views/fragment-view.js

@@ -0,0 +1,24 @@
+var FragmentView = Backbone.View.extend( {
+
+    tagName: 'li',
+
+    template: _.template( '<#= start #>' ),
+
+    initialize: function ( options ) {
+
+        options = options || {};
+
+        this.model = options.model || null;
+        this.parentView = options.parentView || null;
+
+    },
+
+    render: function () {
+
+        this.$el.html( this.template( this.model.attributes ) );
+
+    }
+
+} );
+
+module.exports = FragmentView;

src/admin/js/src/views/fragments-view.js

@@ -0,0 +1,23 @@
+var FragmentView = helixware.view.FragmentView;
+
+var FragmentsView = Backbone.View.extend( {
+
+    el: 'body',
+
+    initialize: function () {
+
+        this.listenTo( this.model, 'change', this.render );
+
+    },
+
+    render: function () {
+
+        _.each( this.model, function ( item ) {
+            this.$el.append( new FragmentView( item.attributes ) );
+        } );
+
+    }
+
+} );
+
+module.exports = FragmentsView;