div content not showing when html code moved to shell.html

问题

I have downloaded a template from site:

http://www.mosaicpro.biz/item/coral-app-website-startup-kit-18.html

I am trying to integrate this into Durandal:

when i keep the html content inside the file: Durandal->index.cshtml, everything works perfectly. But when i move the div content to shell.html, everything is shown as blank, nothing appears on the screen.

i can see activate method of shell.js firing and there is no error in console. Also there is no code in activate which is hiding any content.

Has anyone faced any such issue with durandal?

回答1:

There isn't enough information here to answer the question fully. Make sure to include code samples (simplified if possible) of what you are trying to do. So, my assumption of your layout is that you have specific code inside your index.cshtml file (your main SPA page), and you want to move it inside the shell (the main view layout of your page). Since you are saying that the entire page is blank, my guess is that you might have moved the script tag that loads up the application. Make sure you have

<script data-main="MyMainSPAPagePath/main" src="Scripts/require.js"></script>

in the .cshtml (home) page, and make sure that the data-main path leads to the main application (which will in turn load up the shell). The main module (main.js) will set the root view of the application to the shell, which should consist of both the shell view, and shell viewmodel. Code like this should be in the main to do that:

app.start().then(function () {
    app.setRoot('viewmodels/shell');
})

Your shell can contain navigation, or whatever have you. But the content of the page (the other modules) need a location to load. So make sure in the shell, you have something like the following tag, this will be where the content is loaded:

<section id="content" data-bind="router: {}">Loading...</section>

Inside your shell, you need to have defined routes to load up the appropriate module. Matched routes will display inside that section tag (could be a div too, doesn't matter too much, it's semantics).

Check out Durandal's Getting Started app as a reference: http://durandaljs.com/get-started.html

If you follow the getting started guide, performing what you're trying to do should be pretty straight forward.

Some other things to consider;

Inside your main.js file, make sure debugging is enabled (system.debug(true);), as there could be errors that aren't showing up due to that not being enabled.
Make sure you have your view and viewmodels linked correctly. If you are not using the convention of where you locate files, make sure to define it.
Try some basic code in the shell. If you put just a regular span in the shell with basic text, does that show up? If so, then it is most likely something unique with the code from the website you downloaded (can't be sure without an example given), in which case you might have to modify some routes or links.

Hopefully that helps. Check that durandal link too, as it sounds like it should be a simple fix, and you might just not have something defined or loaded in the right order.

回答2:

My code is like below-> index.html

<html>
<div>some div content from template<div>
<script data-main="MyMainSPAPagePath/main" src="Scripts/require.js"></script>
<script>some app specific scripts</script>
</html>

but when i move the div to shell.html i.e remove only div part

index.html->

<html>
<script data-main="MyMainSPAPagePath/main" src="Scripts/require.js"></script>
<script>some app specific scripts</script>
</html>

shell.html->

<div>some div content from template<div>

the page becomes blank.

i can see activate method of shell firing and all routes are properly configured.

来源：https://stackoverflow.com/questions/23447436/div-content-not-showing-when-html-code-moved-to-shell-html

标签

durandal