title: How to Break knockout view model in parts with requirejs
body: <p>I am currently working on an application which is enlarging itself due to so much functionality. Here i am going to present some sample code to understand.</p>
  
  <pre><code>function test(){
      var self = this
      /*  Define Properties   */
      self.TaskSection = ko.observable()
      .
      .
      /*  Define Get Requrest */
      self.GetTasks = function(){
  
      }
      .
      .
      /*  Define Post Requrest    */
      self.PostTask  = function(){
  
      }
      .
      .
  
      /*  Define Helper Methods   */
      self.FormatDate  = function(){
  
      }   
      .
      .
      /*  Define Navigation Methods   */
      self.HomePage  = function(){
  
      }   
      .
      .
      /*  End */
  }
  </code></pre>
  
  <p>OK. Pretty simple. You can see the sample model but it is now difficult to work with it as each section contains many functions. Lets assume more then 10 functions in each section. Now I want to manage the application using <code>requirejs</code>. This is what i have tried.</p>
  
  <p><code>The Structure</code></p>
  
  <pre><code>app/
      js/
          /Collections/   /*  For ObservableArrays    */
          /Events/        /*  For Collections and Models  */
          /Helpers/       /*  For Collections and Models  */
          /Models/        /*  Default Properties  */
  </code></pre>
  
  <p>Currently what I want is now break the model in 3 to 4 parts.</p>
  
  <ul>
  <li>Collection.js where I define only <code>observableArray()</code>    </li>
  <li>Events.js where I want to define server related functions    </li>
  <li>Helpers.js where I want to define functions to do some internal work.    </li>
  </ul>
  
  <p>How can I achieve this. This is what I have tried.</p>
  
  <pre><code>define(["knockout"],function (ko) {
      function test(){
          var self = this
          self.TaskList = ko.observanleArray()
      }
      return new test()
  });
  
  define(["knockout","TaskList"],function (ko,TaskList) {
      var events  = function() {
          var self = this
          self.AddItem = function (data) {
              TaskList.push(TaskModel)
          }
          self.RemoveItem = function (data) {
              TaskList.remove(data)
          }
      }
      return new events()
  });
  
  define(["knockout","TaskList"],function (ko,TaskList) {
      var helpers  = function() {
          var self = this
          self.SortTaskList = function (data) {
              TaskList.sort()
          }
      }
      return new helpers()
  });
  </code></pre>
  
  <p>Here I dont know how to merge them. <code>TaskList</code> in events.js and helper.js is undefined. I know I need to pass TaskList as parameter but I don't want to use function way. Instead I want to use literal way to merge these two files into Tasklist.js viewmodel. </p>
  
  <p>How can I do this?</p>