backbone-layout - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

backbone-layout.js

@@ -12,3 +12,2 @@ /**
     });
-
   }
@@ -44,2 +43,3 @@
      * - cache  Do not destroy the view.  For switching between views.
+     * - plugin  Adds the view to the selector using setElement
      */
@@ -59,2 +59,3 @@ setView: function (view, selector, options) {
       var cache = options.cache;
+      var plugin = options.plugin;
 
@@ -65,9 +66,16 @@ // View container:
 
-      // Clean up old view if not appending:
-      if (views.length && !append) {
-        _.each(views, function (item, i) {
+      // Clean up other views if replacing views or moving view
+      if (views.length) {
+        // Iterate over clone to because we are removing views
+        var removed = 0;
+        _.each(_.clone(views), function (item, i) {
           var oldView = item.view;
           var options = item.options;
+          if (plugin && oldView === view) {
+            // View list maintenance for plugins:
+            views.splice(i - removed++, 1);
+          } else
           if ($children.is(oldView.el)) {
-            if (oldView !== view) {
+            // DOM clean up:
+            if (!append && oldView !== view) {
               if (options && options.cache) {
@@ -79,3 +87,6 @@ oldView.$el.detach();
             }
-            views.splice(i, 1);
+            // View list maintenance:
+            if (!append || oldView === view) {
+              views.splice(i - removed++, 1);
+            }
           }
@@ -91,3 +102,7 @@ });
       });
-      $container.append(view.el);
+      if (plugin) {
+        view.setElement($container);
+      } else {
+        $container.append(view.el);
+      }
 
@@ -94,0 +109,0 @@ return this;

gulpfile.js

@@ -23,3 +23,5 @@ var connect = require('gulp-connect');
     port: 8500,
-    livereload: true
+    livereload: {
+      port: 35710
+    }
   });
@@ -47,3 +49,3 @@ });
 gulp.task('watch', function () {
-  gulp.watch(files, ['reload', 'test']);
+  gulp.watch(files, ['reload']);
 });
@@ -50,0 +52,0 @@

package.json

 {
   "name": "backbone-layout",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A simple layout manager for Backbone.",
@@ -5,0 +5,0 @@ "author": "Carl Sutherland <[e-mail]>",

spec/spec.js

@@ -124,3 +124,3 @@ /*jshint expr:true */
     it('replaces view after change to same selector', function () {
-      layout.setView(viewA).setView(viewA).setView(viewB);;
+      layout.setView(viewA).setView(viewA).setView(viewB);
       expect(contains(layout.$el, viewA.el)).to.be.false;
@@ -137,2 +137,3 @@ expect(contains(layout.$el, viewB.el)).to.be.true;
       expect(contains(layout.el, viewB.el)).to.be.true;
+      expect(layout.views).to.have.length(2);
     });
@@ -146,3 +147,68 @@ it('appends view to selector', function () {
       expect(contains(layout.$('.view'), viewB.el)).to.be.true;
+      expect(layout.$('.view')).to.have.length(1);
+      expect(layout.views).to.have.length(2);
     });
+    it('re-appends view to element', function () {
+      layout
+        .setView(viewA, null, { append : true })
+        .setView(viewA, null, { append : true });
+      expect(contains(layout.el, viewA.el)).to.be.true;
+      expect(layout.views).to.have.length(1);
+    });
+    it('re-appends views updating order', function () {
+      layout
+        .setView(viewA, null, { append : true })
+        .setView(viewB, null, { append : true })
+        .setView(viewA, null, { append : true });
+      expect(contains(layout.el, viewA.el)).to.be.true;
+      expect(contains(layout.el, viewB.el)).to.be.true;
+      expect(layout.views).to.have.length(2);
+
+      // Last in line:
+      expect(viewB.$el.next().get(0)).to.equal(viewA.el);
+      expect(layout.views[1].view).to.equal(viewA);
+    });
+    it('replaces multiple views which have been appended', function () {
+      layout
+        .setView(viewA, null, { append : true })
+        .setView(viewB, null, { append : true })
+        .setView(viewC);
+      expect(contains(layout.el, viewA.el)).to.be.false;
+      expect(contains(layout.el, viewB.el)).to.be.false;
+      expect(contains(layout.el, viewC.el)).to.be.true;
+      expect(layout.views).to.have.length(1);
+    });
+    it('plugs a view in to element', function () {
+      layout
+        .setView(viewA, null, { plugin : true })
+        .setView(viewB, null, { plugin : true });
+      expect(viewA.el).to.equal(layout.el);
+      expect(viewB.el).to.equal(layout.el);
+      expect(layout.views).to.have.length(2);
+    });
+    it('plugs a view in to selector', function () {
+      layout.$el.html(template);
+      layout
+        .setView(viewA, '.view', { plugin : true })
+        .setView(viewB, '.view', { plugin : true });
+      var el = layout.$('.view').get(0);
+      expect(viewA.el).to.equal(el);
+      expect(viewB.el).to.equal(el);
+      expect(layout.views).to.have.length(2);
+    });
+    it('plugs a view in to another composite view', function () {
+      layout
+        .setView(viewA, null, { plugin : true })
+        .setView(viewB);
+      expect(viewA.el).to.equal(layout.el);
+      expect(contains(layout.el, viewB.el)).to.be.true;
+      expect(layout.views).to.have.length(2);
+    });
+    it('re-plugs a view in', function () {
+      layout
+        .setView(viewA, null, { plugin : true })
+        .setView(viewA, null, { plugin : true });
+      expect(viewA.el).to.equal(layout.el);
+      expect(layout.views).to.have.length(1);
+    });
     it('caches view', function () {
@@ -149,0 +215,0 @@ var view = new ViewCache();

No alert changes

Improved metrics

Total package byte prevSize

21338

increased by17.69%

Lines of code

507

increased by19.58%

No dependency changes