CODEWITHSUNDEEP
javascriptknockout.jsdurandal
TheMook
TheMook

Reputation: 1541

Multiple areas/sections within a single page app. Durandal and knockout approach

I'm putting together a single page app where there are multiple sections/areas on the page (like a column a third of a page wide on the left and a similar column on the right) where I'd like to be able to swap in and out different views with associated viewmodels.

For example, on loading the page, I'm displaying a list of products. The user can then click on a product and the details are displayed in the middle of the screen, with some calculations on cost and manufacturing on the far right. This is fine as a single page, but the user can drop into "edit mode" where they can change the components of the selected product.

When the user goes into edit mode, I'd like to replace the list of products in the left column with a list of raw materials instead. Ideally I'd like to be able to offer a transition effect to this change if possible. A bit like an asp.net/ajax accordion panel or even a tab view I suppose.

The thing is, as I'm using durandal and this, I believe, expects a separate page/view/model to "navigate to" such that http://myapp.com/#/products becomes http://myapp.com/#/editproduct but I want to leave the middle and right columnx untouched and only load up the new view in the left column, retaining the original product list view in memory such that as soon as edit mode is exited, the user is right back where they were before in the product list on the left.

I'm so new to all this that I don't yet know the terminology for what I'm looking for so it's hard to google effectively. A few pointers on how this sort of thing is best structured would be gratefully received, thanks!

Upvotes: 1

Views: 483

Answers (1)

PW Kad
PW Kad

Reputation: 14995

There are a lot of options that you have. I want to point them out, because you have a pretty complicated question -

  1. Durandal offers very hands-on support for your situation. This is a paid service, but it sounds like you need in-depth technical guidance on architecture, not simply a minor code suggestion.
  2. You can be very creative with your app to achieve what you are looking for. Remember that using Knockout's view composition you can show anything you want, at any time, using standard logic - 
<div>
    <!-- ko if: showingMyView() -->
        <!-- ko compose: { view: 'fights/fight-small' } --><!-- /ko -->
    <!-- /ko -->
</div>

This is an extremely simply example. You should get much more in-depth in your actual app, probably.

Upvotes: 1

Related Questions