I've started playing with the Single Page Application template for MVC 5 that comes with Visual Studio 2013. I'm more than familiar with Knockout.js
, and although I wasn't with Sammy.js
I've been reading up on it and it doesn't seem all that complicated.
What I can't seem to wrap my head around is how the MVC 5 SPA Template combines these technologies, or what the Visual Studio team had in mind for the template as an example; the template provides, amongst other things, a home.viewModel.js
file that's supposed to serve as a starting point, but I can't seem to understand how I can add more views with Sammy.js
routes. If only they had provided a second partial view and viewmodel.
My Question
So, short story long, my real questions are,
- how do I go about displaying a partial view linked to the route
#users
in a way that mimics the providedhome.viewmodel.js
, so that I can navigate back a forth from#home
to#users
? What would theSammy.js
route definition look like inusers.viewModel.js
? - Do I need to do anything special to enable the browsers back button or will it just work as soon as I have defined my routes properly?
- It it me or does this template feel as a half-baked example?
The following code is just for extra reference/context, but it probably not necessary in order for the question to be answered.
Some context
Let's assume I have created a partial view, _Users.cshtml
, served by a UserController
, which is an MVC controller and not a WebAPI
controller, and that I want to display that partial view by means of a Sammy.js
route, to which end I've created a users.viewModel.js
. Now...
The provided Index.cshtml
view looks like this:
@section SPAViews {
@Html.Partial("_Home")
}
@section Scripts{
@Scripts.Render("~/bundles/knockout")
@Scripts.Render("~/bundles/app")
}
Which I presume is meant as the application "shell" page, where the rest of partial views will be loaded to substitute the contents of the _Home
partial.
The problem is that on the home.viewmodel.js
the Sammy
route is initialized without passing in a selector for the element that will hold the content, like this
Sammy(function () {
this.get('#home', function () {
// more code here
}
instead of, for example
Sammy("#content", function () {
this.get('#home', function () {
// more code here
}
Am I supposed to place the _Users
partial alongside _Home
from the very beginning so that the Index
view looks like this?
@section SPAViews {
@Html.Partial("_Home")
@Html.Partial("_Users")
}
@section Scripts{
@Scripts.Render("~/bundles/knockout")
@Scripts.Render("~/bundles/app")
}
This will, of course, display both views at the same time, which is not what we want.
My users.viewmodel.js
looks like this:
function UsersViewModel(app, dataModel) {
var self = this;
Sammy(function () {
this.get('#users', function () {
// the following line only makes sense if _Users is not
// called from Index.cshtml
//this.load(app.dataModel.shoppingCart).swap();
});
});
return self;
}
app.addViewModel({
name: "Users",
bindingMemberName: "users",
factory: UsersViewModel
});
I've tried using the Sammy.js
swap
method, but since my _Users
view is a partial and Sammy
is not set up to act on a specific element the whole page is replaced... and the browser's back button doesn't seem to work.
Sorry for the massive amount of text, and if this is a very trivial question. It bothers me that I can't seem to figure it out on my own, even after going through the docs.