javascript - KnockoutJS - Multiple partial views within on main view? - Stack Overflow

admin管理员组

文章数量:1292113

I am trying to port an existing asp mvc app over to use knockoutjs (pure js/html) as I no longer really need any of the functionality within asp mvc. However one problem I can forsee is the way I am handling some of my pages.

I have one page which contains about 12 partial views, each partial has its own model. Now with Knockout JS it seems like you should only really have 1 viewmodel/view per page, however the page I have contains a large amount of information, the sections would be akin to:

• Customer Details
• Customer Address
• Customer Recent Orders
• Customer Cards
• Customer Funds
• ...

To make things more tricky if some details change in on part, it needs to change data in another part. So lets say you remove a card it then needs to tell the funds control that it no longer has a card so wont have funds. (This is all an abstract example, but hopefully illustrates the point)

So I am a bit unsure how to do this in knockout, as that would rather have it as one big model, which I would be happy with doing but it contains ALOT of information. As well as multiple forms, as you can update your address without having to update everything else.

So should I just make one large model for this view and just deal with it? or is there a way to have views talk to each other?

I am trying to port an existing asp mvc app over to use knockoutjs (pure js/html) as I no longer really need any of the functionality within asp mvc. However one problem I can forsee is the way I am handling some of my pages.

I have one page which contains about 12 partial views, each partial has its own model. Now with Knockout JS it seems like you should only really have 1 viewmodel/view per page, however the page I have contains a large amount of information, the sections would be akin to:

• Customer Details
• Customer Address
• Customer Recent Orders
• Customer Cards
• Customer Funds
• ...

To make things more tricky if some details change in on part, it needs to change data in another part. So lets say you remove a card it then needs to tell the funds control that it no longer has a card so wont have funds. (This is all an abstract example, but hopefully illustrates the point)

So I am a bit unsure how to do this in knockout, as that would rather have it as one big model, which I would be happy with doing but it contains ALOT of information. As well as multiple forms, as you can update your address without having to update everything else.

So should I just make one large model for this view and just deal with it? or is there a way to have views talk to each other?

• javascript
• model-view-controller
• knockout.js

Share Follow edited Jun 28, 2011 at 18:04 user1228 asked Jun 28, 2011 at 16:09 somemvcpersonsomemvcperson 1,25322 gold badges1818 silver badges3131 bronze badges 2

• Does anyone have any decent tutorials in general for Knockout as I found the documentation a bit to short, and there were only some small examples. Nothing significant like a demo app that showed it working on multiple pages etc... – somemvcperson Commented Jun 28, 2011 at 21:49
• Just to add some context to the demo app bit, I found their site had a few decent examples but they only seemed to use a View Model and View, never a model, so what is this other Model all about? as otherwise its just VVM... – somemvcperson Commented Jun 28, 2011 at 23:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I would caution against one monster view model because it creates a tight coupling that you'll want to avoid in plex applications.

A better solution is to build a pub/sub system on top of ko.subscribable. Communication between view models is then facilitated by managing subscriptions to various events. It's a little more work upfront, but it will pay dividends down the road.

Here is a blog post that expands on the topic. I highly remend this blog. Its a great resource for knockout-specific challenges and strategies.

My strategy is to use a one large view model. No matter you put it, the partial views are a server-side concept and once everything transfers to the client side, it would be large amount of data information in a single page.

However to make things manageable I ensure that every Javascript manipulation code is written in it's own Partial view. This makes it easier to track functionality and it's respective code.

So basically you populate your main Customers array object in the main page and then call functions to populate Details, Addresses etc. which are respectively defined in each of the partial view.

本文标签： javascriptKnockoutJSMultiple partial views within on main viewStack Overflow