Separating javascript "classes" or "modules" from the View Model using Knockout.js / RequireJs
I have an application that I am developing with Knockout and I am using RequireJs and what I am trying to do is have specific code for several different pages without having to have code in multiple files ... stuff like this:
function perPageOption(value, display) {
this.value = value;
this.display = display;
}
I have on my page:
<script data-main="/Scripts/JournalEntriesDetailPage" src="~/Scripts/require.js"></script>
And a script (JournalEntriesDetailPage):
require(['Knockout', 'journalEntiresDetailViewModel', './app/JournalModels', 'domReady'], function (ko, viewModel) {
ko.applyBindings(new viewModel());
});
And then in my "journalEntiresDetailViewModel" I have this:
//per page options
self.perPageOptions = [new perPageOption(10, 10), new perPageOption(20, 20), new perPageOption(50, 50), new perPageOption(100, 100)];
"./app/JournalModels" is where the arrays / classes are located and they appear "undefined" when I try to use them on any page I try to "import" them to. I am struggling to figure this out. I've looked at examples for multi-page applications with requirejs and they seem too complicated for what I'm trying to do. I don't understand why "domready" works when I "require" it, but my file doesn't work.
I have also tried this without success:
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();
});
});
and
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);
}
});
and
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);
}
}
});
source to share
Ok, I thought I tried this before, but now this works:
Page:
<script data-main="/Scripts/JournalEntriesDetailPage" src="~/Scripts/require.js"></script>
Init script (JournalEntriesDetailPage):
require(['Knockout', 'journalEntiresDetailViewModel', 'domReady!'], function (ko, viewModel) {
ko.applyBindings(new viewModel());
});
Show model script (journalEntiresDetailViewModel):
define(['Knockout', './app/JournalModels'], function (ko, model) {
return function () {
//per page options
self.perPageOptions = [new model.perPageOption(10, 10), new model.perPageOption(20, 20), new model.perPageOption(50, 50), new model.perPageOption(100, 100)];
//tons of other code
}
});
and the definition in the "models" script (JournalModels):
define(['Knockout'], function (ko) {
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 {
entryType: function (data) {
return new _entryType(data);
},
entry: function (data) {
this.id = ko.observable(data.ID);
this.createdby = ko.observable(data.CreatedBy);
var datey = new Date(+data.CreatedDate.match(/\d+/)[0]);
this.createddate = ko.observable(datey.toLocaleDateString() + " " + datey.toLocaleTimeString());
this.content = ko.observable(data.Content);
this.entrytype = ko.observable(new _entryType(data.EntryType));
this.entrytypename = ko.observable(data.EntryType.Name);
this.entrytypeid = ko.observable(data.EntryType.ID);
this.journalid = ko.observable(data.journalid);
},
perPageOption: function (value, display) {
this.value = ko.observable(value);
this.display = ko.observable(display);
}
}
});
I needed to return data in the script models, which I thought I tried, but I must not have done the other important part ... which was:
define(['Knockout', './app/JournalModels'], function (ko, model) {...
... in the view model script, so I could use "model" in my view model "model.pagePerOption". Basically I just had to stumble over the right combination ... because I tried everything and changed so much that the two things I needed were probably not there at the same time until they were finally there.
Thanks for answers...:)
source to share