some java script seems to be overwritten by durandal

问题

I am trying to implement a Single Page Application using the Hot Towel Template. Everything was fine until I tried to incorporate a CSS HTML template. I am using Durandal + RequireJS.

My HTML for navigation bar is in nav.cshtml (I am using cshtml with Durandal)

The same HTML if pasted in index.html before

<div id="applicationHost">

it works fine.

if Same is included inside applicationHost using Durandal nav view, it doesnt works properly.

My nav.cshtml has one root and no spaces or comments.

On the nav bar, hoveover related javascript seems to be not working.

and slider is also not trigger the required javascript to initiate it.

any idea how to fix this?

i have uploaded my code at http://we.tl/3NgPgGhoUI if you copy every thing in nav.cshtml and paste it above applicationHost the nave hoverover works fine. but if you inject it using durandal. it wont work. same is true for the html code in home.cshtml. that html there is actually just a slider. it is not showing any thing when injected using durandal. but same is working fine if you copy the html in index.cshtml ill b really great full if you could have a look into it.

i converted all cshtml to html (except index) and my shell.html is as mentioned below.

<div>
<div>
    <!-- ko compose: {view: 'nav'} -->
    <!-- /ko-->
</div>
<div id="content">
    <!--ko compose: {
        model: router.activeItem,
        compositionComplete: router.compositionComplete,
        attached: router.attached,
        cacheViews:true,
        } -->
    <!--/ko-->
</div>
<!-- ko compose: {view: 'footer'} -->
<!-- /ko-->

index.cshtml is

<body>
<div id="applicationHost">        
</div>
<script src="/TemplateFiles/js/jquery.js"></script>
@Scripts.Render("~/scripts/vendor") 
<script src="~/Scripts/require.js" data-main="@Url.Content("~/App/main.js")"></script>
</body>
</html>

回答1:

I can say for certain why this isn't working. When the index page is loaded, it is loaded through the standard ASP.NET pipeline with Razor as the rendering engine. Razor is what allows things like @Html.Partial("_splash") to be translated into HTML (because that's not meaningful in HTML as it is).

On the other hand, nav.cshtml is being loaded via AJAX by Durandal. It does not go through the Razor rendering process and so you can't use things like @Html.Partial("_splash"). All such code will have to go in index.cshtml. Everything that Durandal retrieves will have to be plain HTML. You'll need to convert your nav.cshtml to nav.html and use regular HTML syntax in there.

P.S. It may be possible to use Razor (cshtml) to respond to Durdandal AJAX requests, but that would likely be a complicated process and one I would recommend against.

回答2:

One thing I can say for sure is that you should be using the "router" binding for your main content instead of the "compose" binding you're currently using. It would be cleaner. You can find documentation for that here.

The only other thing can think of is to make sure you set up your convention properly for your views. In other words, you need to call viewLocator.useConvention() on the ViewLocator module during startup and it will expect to see your file structure look something like this:

/App
| - main.js // startup code
| - /views
|   | - nav.html
|   | - shell.html
|   | - home.html
| - /viewmodels
|   | - shell.js
|   | - home.js

If you've done all these things, then I don't know what else to say without looking at all your code which I may do, but it will take me a while.

来源：https://stackoverflow.com/questions/24559718/some-java-script-seems-to-be-overwritten-by-durandal

标签

single-page-application

durandal