Merge pull request #171 from purplebricks/CustomPageHref

Binding handler page-href name can now be over-ridden by the user
finnsson · Apr 23, 2014 · 766f83f · 766f83f
2 parents f9d7ee9 + 725d10b
commit 766f83f
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 7 deletions.
diff --git a/dist/pager.min.js b/dist/pager.min.js
diff --git a/pager.js b/pager.js
@@ -1306,19 +1306,47 @@
             }
         };
 
-// page-href
-
+        /**
+        *
+        * @type {string}
+        */
+        var _dataAttribute = 'page-href';
+
         /**
          *
          * @type {Boolean}
          */
         pager.useHTML5history = false;
+
         /**
          *
          * @type {String}
          */
         pager.rootURI = '/';
 
+        /**
+         *
+         * @type {String}
+         */
+        pager.dataAttribute = ko.computed({
+            read: function () {
+                return _dataAttribute;
+            },
+            write: function (value) {
+                if(!value){
+                    var err = new Error();
+                    err.message = 'Data Attribute cannot be blank';
+                    throw err;
+                }          
+
+                if(ko.bindingHandlers[_dataAttribute]){
+                    delete ko.bindingHandlers[_dataAttribute];
+                }
+                _dataAttribute = value;
+                ko.bindingHandlers[_dataAttribute] = koBindingHandlerMethod;
+            }
+        });
+
         pager.Href = function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
             this.element = element;
             this.bindingContext = bindingContext;
@@ -1380,7 +1408,7 @@
             });
         };
 
-        ko.bindingHandlers['page-href'] = {
+        var koBindingHandlerMethod = {
             init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                 var Cls = pager.useHTML5history ? pager.Href5 : pager.Href;
                 var href = new Cls(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
@@ -1393,6 +1421,8 @@
             }
         };
 
+        ko.bindingHandlers[pager.dataAttribute()] = koBindingHandlerMethod;
+
         pager.fx = {};
 
         pager.fx.cssAsync = function (css) {

diff --git a/pagerjs.com/demo/pager.min.js b/pagerjs.com/demo/pager.min.js
diff --git a/test/should_throw_when_blank_custom_binding_handler_name_set.html b/test/should_throw_when_blank_custom_binding_handler_name_set.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Should access URI parameters</title>
+    <script type="text/javascript" src="../lib/jquery-2.0.3.min.js"></script>
+    <script type="text/javascript" src="../lib/underscore-min.js"></script>
+    <script type="text/javascript" src="../lib/knockout-3.0.0.js"></script>
+    <script type="text/javascript" src="../lib/jquery.ba-hashchange.min.js"></script>
+    <script type="text/javascript" src="../pager.js"></script>
+
+    <link rel="stylesheet" href="../lib/qunit.css"/>
+</head>
+<body>
+    <div id="qunit"></div>
+    <div data-bind="page: {id: 'first'}"></div>
+
+    <script type="text/javascript">
+
+        var viewModel = {
+        };
+
+        pager.extendWithPage(viewModel);
+        ko.applyBindings(viewModel);
+        pager.start();
+
+    </script>
+
+    <script type="text/javascript" src="../lib/qunit-until.js"></script>
+    <script type="text/javascript" src="../lib/qunit.js"></script>
+
+    <script type="text/javascript">
+
+        asyncTest("Should throw when setting blank data attribute", function () {
+            raises(function(){
+                pager.dataAttribute('');
+            },
+            function(err) {
+                return err.message === 'Data Attribute cannot be blank';
+            },
+            'Throws an error when attempting to set a blank dataAttribute');
+
+            start();
+        });
+
+    </script>
+</body>
+</html>
diff --git a/test/should_use_custom_binding_handler_name.html b/test/should_use_custom_binding_handler_name.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Should access URI parameters</title>
+    <script type="text/javascript" src="../lib/jquery-2.0.3.min.js"></script>
+    <script type="text/javascript" src="../lib/underscore-min.js"></script>
+    <script type="text/javascript" src="../lib/knockout-3.0.0.js"></script>
+    <script type="text/javascript" src="../lib/jquery.ba-hashchange.min.js"></script>
+    <script type="text/javascript" src="../pager.js"></script>
+
+    <link rel="stylesheet" href="../lib/qunit.css"/>
+</head>
+<body>
+    <div id="qunit"></div>
+    <div data-bind="page: {id: 'first'}"></div>
+
+    <script type="text/javascript">
+
+        var viewModel = {
+        };
+
+        pager.dataAttribute('pageHref');
+        pager.extendWithPage(viewModel);
+        ko.applyBindings(viewModel);
+        pager.start();
+
+    </script>
+
+    <script type="text/javascript" src="../lib/qunit-until.js"></script>
+    <script type="text/javascript" src="../lib/qunit.js"></script>
+
+    <script type="text/javascript">
+
+        asyncTest("Should have custom data attribute", function () {
+            ok(ko.bindingHandlers['pageHref']);
+
+            start();
+        });
+
+    </script>
+</body>
+</html>
diff --git a/test/should_use_default_binding_handler_name.html b/test/should_use_default_binding_handler_name.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Should access URI parameters</title>
+    <script type="text/javascript" src="../lib/jquery-2.0.3.min.js"></script>
+    <script type="text/javascript" src="../lib/underscore-min.js"></script>
+    <script type="text/javascript" src="../lib/knockout-3.0.0.js"></script>
+    <script type="text/javascript" src="../lib/jquery.ba-hashchange.min.js"></script>
+    <script type="text/javascript" src="../pager.js"></script>
+
+    <link rel="stylesheet" href="../lib/qunit.css"/>
+</head>
+<body>
+
+<div id="qunit"></div>
+
+<div data-bind="page: {id: 'first', params: ['nam','ans']}">
+    <div id="answer" data-bind="text: ans"></div>
+    <div id="name" data-bind="text: nam"></div>
+</div>
+
+<script type="text/javascript">
+
+
+    var viewModel = {
+    };
+
+    pager.extendWithPage(viewModel);
+    ko.applyBindings(viewModel);
+
+    pager.start();
+</script>
+
+<script type="text/javascript" src="../lib/qunit-until.js"></script>
+<script type="text/javascript" src="../lib/qunit.js"></script>
+
+<script type="text/javascript">
+
+    asyncTest("Should have default data attribute", function () {
+        ok(ko.bindingHandlers['page-href']);
+
+        start();
+    });
+</script>
+
+
+</body>
+</html>