StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POShould data load occur in model or viewmodel when using Knockout
primarykey
Id
13239489
data
AcceptedAnswerId
13239636
AnswerCount
1
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2012-11-05T20:03:52.937
FavoriteCount
2
LastActivityDate
2012-11-05T20:13:40.200
LastEditDate
LastEditorUserId
0
OwnerUserId
82541
ParentId
0
PostTypeId
1
Score
4
ViewCount
1273
LastEditorDisplayName
text
Body
Is it wise to put your ajax calls in your Knockout ViewModel or should it instead be placed in a Model? I've come up with a few approaches but none feel completely right. Approach 1 - ViewModel Only <pre><code>window.someDataVM = function() { var self = this; //used to enable loading indicator self.pendingLoad = ko.observable(true); self.myData = ko.observableArray(); self.load = function() { //make ajax call and populate myData observable array } } </code></pre> Advantages <ul> <li>Simplest code structure - easier to maintain</li> </ul> Disadvantages <ul> <li>No reuse for data retrieval</li> </ul> Approach 2 - Model and ViewModel With Callback <pre><code> window.someDataVM = function() { var self = this; //used to enable loading indicator self.pendingLoad = ko.observable(true); self.myData = ko.observableArray(); self.load = function() { someDataM.load(function(data) { //populate myData observable array }); } } window.someDataM = function() { return { load: function(callback) { //get data via ajax and return via callback } } } </code></pre> Advantages <ul> <li>More code reuse on data retrieval (i.e. one place to load someData)</li> <li>Simpler interface that approach 3</li> </ul> Disadvantages <ul> <li>Uses callbacks</li> </ul> Approach 3 - Model and ViewModel With Knockout Model <pre><code>window.someDataVM = function() { var self = this; //used to enable loading indicator self.pendingLoad = ko.observable(true); self.myData = ko.observableArray(); self.load = function() { someDataM.load(); } someDataM.isLoaded.subscribe(function(isLoaded) { if (isLoaded) { //populate observable array } }); } window.someDataM = function() { return { isLoaded: ko.observable(false); items: [], load: function() { //get some data, populate items, set isLoaded } } }(); </code></pre> Advantages <ul> <li>Doesn't use callback</li> <li>Keeps data code centralized</li> </ul> Disadvantages <ul> <li>Will be complicated to have lots of data entry points (i.e. LoadById, LoadByName, etc, etc.)</li> </ul>
Tags
<javascript><mvvm><knockout.js>
Title
Should data load occur in model or viewmodel when using Knockout
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USBlake Blackwell
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POShould data load occur in model or viewmodel when using Knockout
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 POShould data load occur in model or viewmodel when using Knockout
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 POShould data load occur in model or viewmodel when using Knockout
 UserUserId
 USPaul
 VoteTypeVoteTypeId
 VTFavorite
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.