epoxy refactor

immosmart · Apr 17, 2014 · 4561bc6 · 4561bc6
1 parent bc268bc
commit 4561bc6
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 49 deletions.
diff --git a/demo/code.js b/demo/code.js
@@ -11,7 +11,7 @@
         },
 
         init: function () {
-            this.collection = new Collection(App.videos);
+            this.collection = new Backbone.Collection(App.videos);
         },
         // handler for click event
         onItemClick: function (e) {
@@ -62,14 +62,14 @@
             'nav_focus .navigation-item': 'onFocus',
             'nav_blur .navigation-item': 'onBlur'
         },
+        initialize: function(){
+            this.$info=this.$('.navigation-info');
+        },
         onFocus: function (e) {
             this.$info.html(e.currentTarget.innerHTML);
         },
         onBlur: function (e) {
             this.$info.html('');
-        },
-        shortcuts: {
-            $info: '.navigation-info'
         }
     });
 
@@ -85,7 +85,7 @@
         App.setScenesContainer('.scenes-wrapper');
         App.setHeader('.menu-items', '.menu-item');
 
-        ViewModel.create({
+        new (Backbone.Epoxy.View.extend({
             events: {
                 'nav_key:blue': 'toggleView',
                 'nav_key:stop': function () {
@@ -115,7 +115,7 @@
                 }
                 this.isShown = !this.isShown;
             }
-        });
+        }))();
 
         // toggling background when player start/stop
         Player.on('ready', function () {

diff --git a/index.html b/index.html
@@ -13,12 +13,13 @@
     <script type="text/javascript" src="smartbox/demo/asset/jquery-1.10.2.min.js"></script>
     <script type="text/javascript" src="smartbox/demo/asset/lodash.compat.min.js"></script>
     <script type="text/javascript" src="smartbox/demo/asset/json2.js"></script>
-    <script type="text/javascript" src="frontbone/bin/frontbone.js"></script>
+    <script type="text/javascript" src="lib/backbone-min.js"></script>
+    <script type="text/javascript" src="lib/backbone.epoxy.min.js"></script>
     <script type="text/javascript" src="smartbox/dist/smartbox.js"></script>
     <script type="text/javascript" src="src/js/tabs.js"></script>
     <script type="text/javascript" src="src/js/scenes.js"></script>
     <script type="text/javascript" src="src/js/legend.bind.js"></script>
-    <script type="text/javascript" src="src/js/carousel.bind.js"></script>
+    <!--script type="text/javascript" src="src/js/carousel.bind.js"></script-->
 
     <script type="text/javascript" src="smartbox/demo/demoApp/videos.js"></script>
     <script type="text/javascript" src="demo/code.js"></script>
@@ -35,21 +36,23 @@
         <div class="logo"></div>
 
         <ul class="menu-items" data-nav_type="vbox" data-nav_loop="true"
-            legend="enter: Show content, blue: Show/hide menu">
-            <li data-content='video' class="menu-item menu-item_green nav-item">Videos</li>
-            <li data-content='input' class="menu-item menu-item_blue nav-item">Inputs</li>
-            <li data-content='navigation' class="menu-item menu-item_red nav-item">Navigation</li>
+            data-bind="legend:'enter: Show content, blue: Show/hide menu'"
+                >
+            <li class="menu-item menu-item_green nav-item">Videos</li>
+            <li class="menu-item menu-item_blue nav-item">Inputs</li>
+            <li class="menu-item menu-item_red nav-item">Navigation</li>
         </ul>
     </div>
 
-    <div class="scenes-wrapper" legend="blue: Show/hide menu">
-        <div class="scene scene_video js-scene-video nav-item" legend="enter: Play video"
-             data-bind="carouselList: {
+    <div class="scenes-wrapper" data-bind="legend:'blue:Show/hide menu'" >
+        <div class="scene scene_video js-scene-video nav-item"
+             data-bind="legend:'enter: Play video'"
+             data-bixnd="carouselList: {
                 size: 10
              }">
-            <div class="video-item" data-bind="html: title"></div>
+            <div class="video-item" data-bidnd="html: title"></div>
         </div>
-        <div class="scene scene_input js-scene-input" legend="enter: Show keyboard, number: Num input">
+        <div class="scene scene_input js-scene-input" data-bind="legend: 'enter:Show keyboard, number: Num input'" >
             <div class="input-example">
                 <h2>Standart input</h2>
                 <input class="input-item js-input-1 nav-item"/>
@@ -68,7 +71,7 @@ <h2>Input with num keyboard and maximum 4 signs</h2>
             </div>
         </div>
         <div class="scene js-scene-navigation">
-            <ul class="navigation-items" legend="move: Navigate">
+            <ul class="navigation-items" data-bind="legend: 'move: Navigate'" >
                 <li class="navigation-item nav-item">1</li>
                 <li class="navigation-item nav-item">2</li>
                 <li class="navigation-item nav-item">3</li>

diff --git a/src/js/legend.bind.js b/src/js/legend.bind.js
@@ -7,31 +7,43 @@
         });
     }
 
-    ViewModel.customAttributes.legend = function ($el, value, context, addArgs) {
 
-        $el.removeAttr('legend');
-        var pairs = _.foldl(value.split(/\s*,\s*/), function (result, pair) {
-            var splt = pair.split(/\s*:\s*/);
-            result[splt[0]] = splt[1];
-            return result;
-        }, {});
+    Backbone.Epoxy.binding.addHandler("legend", {
+        init: function( $element, value, bindings, context ) {
+            var pairs = _.foldl(value.split(/\s*,\s*/), function (result, pair) {
+                var splt = pair.split(/\s*:\s*/);
+                result[splt[0]] = splt[1];
+                return result;
+            }, {});
 
 
-        var $current = $$nav.current();
-        if ($current && $.contains($el[0], $current[0])) {
-            setPairs(pairs)
-        }
-        $el.on({
-            'nav_focus': function (e) {
-                setPairs(pairs);
-            },
-            'nav_blur': function (e) {
-                _.each(pairs, function (value, key) {
-                    keys[key](0);
-                });
+
+            var $current = $$nav.current();
+            if ($current && $.contains($element[0], $current[0])) {
+                setPairs(pairs)
             }
-        });
-    };
+            $element.on({
+                'nav_focus': function (e) {
+                    setPairs(pairs);
+                },
+                'nav_blur': function (e) {
+                    _.each(pairs, function (value, key) {
+                        keys[key](0);
+                    });
+                }
+            });
+        },
+        get: function( $element, value, event ) {
+
+        },
+        set: function( $element, value ) {
+
+        },
+        clean: function() {
+            // Cleanup the binding handler...
+        }
+    });
+
 
 
     $(function () {

diff --git a/src/js/scenes.js b/src/js/scenes.js
@@ -2,13 +2,15 @@ SB(function () {
     $$nav.on();
 });
 
-window.App = TabsHead.create({
+window.App = new (TabsHead.extend({
     el: 'body',
     scenesIndexes: {},
     constructor: function () {
 
         var self = this;
-        ViewModel.prototype._constructor.apply(self, arguments);
+
+        Backbone.Epoxy.View.prototype.constructor.apply(self, arguments)
+        //ViewModel.prototype._constructor.apply();
 
 
         self.heads = [];
@@ -36,7 +38,7 @@ window.App = TabsHead.create({
 
         SB(function () {
             self.scenesIndexes[prototype.name] = self.views.length;
-            var scene = Scene.create(prototype);
+            var scene = new (Scene.extend(prototype))();
             self.add(null, scene.$el);
             if (prototype.isDefault) {
                 self.setScene(prototype.name);
@@ -49,10 +51,10 @@ window.App = TabsHead.create({
         this.show(this.scenesIndexes[name]);
     },
     show: function (index) {
-        this._super(index);
+        TabsHead.prototype.show.apply(this, arguments);
         this.currentScene = this.views[index];
     }
-});
+}))();
 
 
 window.Scene = TabContent.extend({

diff --git a/src/js/tabs.js b/src/js/tabs.js
@@ -1,4 +1,4 @@
-var TabContent = ViewModel.extend({
+var TabContent = Backbone.Epoxy.View.extend({
     //for lazy init
     isInited: false,
 
@@ -27,10 +27,10 @@ var TabContent = ViewModel.extend({
 
         if (!this.isInited) {
             this.init();
-            if (this.lazyParseBinds) {
+            /*if (this.lazyParseBinds) {
                 this.parse();
             }
-            this.isInited = true;
+            this.isInited = true;*/
         }
 
         //this.navContainer.voiceLink(this.voiceSettings);
@@ -40,7 +40,7 @@ var TabContent = ViewModel.extend({
 });
 
 
-var TabsHead = ViewModel.extend({
+var TabsHead = Backbone.Epoxy.View.extend({
     heads: [],
     bodies: [],
     views: [],
@@ -57,7 +57,7 @@ var TabsHead = ViewModel.extend({
         this.bodies = [];
         this.views = [];
         this.el = headsContainer;
-        this._super();
+        Backbone.Epoxy.View.prototype.constructor.apply(this);
         var self = this;
         this.bodiesContainer = $(bodiesContainer);
         var bodiesChildren = this.bodiesContainer.children();