CODEWITHSUNDEEP
javascript
Brittany Rutherford
Brittany Rutherford

Reputation: 605

JavaScript module pattern not working

I am trying to implement module pattern in my code according to some examples online, what I am trying to achieve is to simply bind a button click event in my html to a function (which is not working), below is my HTML: 

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <input type="button" id="btn-msg" value="click me"/>
  </body>

</html>

and here is my JS: 

//CRUD Start
var Rutherford = Rutherford || {};
Rutherford.crud = function() {

  function _readLists() {
    alert("am here");
  }

  return {
    readLists: _readLists
  }
}

Rutherford.Initiate = function() {
  $("#btn-msg").click(Rutherford.crud.readLists);
}

$(function() {
  Rutherford.Initiate();
});

Here is as well a link to my plunker: http://plnkr.co/edit/tA94lzMPHkUOr8QuyJK8?p=preview

All what am trying to achieve is to bind the button to the function.

Upvotes: 1

Views: 465

Answers (2)

Brandon
Brandon

Reputation: 39222

You need to call the anonymous function, not assign it. See the () below:

Rutherford.crud = (function() {

  function _readLists() {
    alert("am here");
  }

  return {
    readLists: _readLists
  }
}());

Here's an updated plunkr with this change: http://plnkr.co/edit/uiWHmtkMFEKywvFRk6DF?p=info

Upvotes: 3

Luca Colonnello
Luca Colonnello

Reputation: 1456

I believe that Evan Knowles wanted to say this:

//CRUD Start
var Rutherford = Rutherford || {};
Rutherford.crud = (function() {

  function _readLists() {
    alert("am here");
  }

  return {
    readLists: _readLists
  }
})( );

Rutherford.Initiate = function() {
  $("#btn-msg").click(Rutherford.crud.readLists);
}

$(function() {
  Rutherford.Initiate();
});

This would work properly if you can use Rutherford as a Singleton.

Upvotes: 0

Related Questions