title: Separating javascript "classes" or "modules" from View Model with Knockout.js / RequireJs
body: <p>I have an app that I'm developing with Knockout and I'm using RequireJs and what I'm trying to do is have certain code available to a number of different pages without having to have the code in more than one file... things like this:</p>
  
  <pre><code>    function perPageOption(value, display) {
          this.value = value;
          this.display = display;
      }
  </code></pre>
  
  <p>I have in my page: </p>
  
  <p><code>&lt;script data-main="/Scripts/JournalEntriesDetailPage" src="~/Scripts/require.js"&gt;&lt;/script&gt;</code></p>
  
  <p>And the script (JournalEntriesDetailPage):</p>
  
  <pre><code>require(['Knockout', 'journalEntiresDetailViewModel', './app/JournalModels', 'domReady'], function (ko, viewModel) {
  ko.applyBindings(new viewModel());
  </code></pre>
  
  <p>});</p>
  
  <p>And then in my "journalEntiresDetailViewModel" I have this:</p>
  
  <pre><code>//per page options
  self.perPageOptions = [new perPageOption(10, 10), new perPageOption(20, 20), new perPageOption(50, 50), new perPageOption(100, 100)];
  </code></pre>
  
  <p>The './app/JournalModels' is where the arrays/classes are located and they come up 'undefined' when I try to use them in any page that I try to "import" them in to. I having a hard time trying to figure this out. I've looked at the examples for multiple page apps on requirejs and they seem way too complicated for what I'm trying to do. I don't understand why "domready" is working when I "require" it, but my file isn't working. </p>
  
  <p>I've also tried this with no success:</p>
  
  <pre><code>define(['Knockout'], function (ko) {
      define('EntryType', function () {
      function EntryType(data) {
          this.id = ko.observable(data.ID);
          this.name = ko.observable(data.Name);
          this.color = ko.observable(data.Color);
          this.journaltypeid = ko.observable(data.JournalTypeID);
      }
      return new EntryType();
      });
  });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>define('EntryType', function () {
      return function EntryType(data) {
          this.id = ko.observable(data.ID);
          this.name = ko.observable(data.Name);
          this.color = ko.observable(data.Color);
          this.journaltypeid = ko.observable(data.JournalTypeID);
      }
  });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>define(['Knockout'], function (ko) {
  
  return {
      pagePerOption: function(data) {
          this.value = value;
          this.display = display;
      },
      entryType: function(data) {
          this.id = ko.observable(data.ID);
          this.name = ko.observable(data.Name);
          this.color = ko.observable(data.Color);
          this.journaltypeid = ko.observable(data.JournalTypeID);
      }
  }
  });
  </code></pre>