Coder Social home page Coder Social logo

Comments (8)

andrewdavey avatar andrewdavey commented on September 23, 2024

Thanks for taking a look at Knapsack. You raise an interesting issue.
I'm trying to work out the best API for this multiple module "blocks" feature. It seems that a module always needs to appear in the same location, top or bottom. So having to specify this on every constituent script reference may get frustrating.
Perhaps this could be a configuration setting instead?

from knapsack.

bkaid avatar bkaid commented on September 23, 2024

You are right - there are really only top or bottom scripts. But for a given page I may want some up top and some at the bottom so I'm not sure if a configuration setting would work. Maybe Html.ReferenceAsyncScript("script.js") and Html.ReferenceScript("script.js") and Html.RenderScripts() and Html.RenderAsyncScripts()

from knapsack.

andrewdavey avatar andrewdavey commented on September 23, 2024

Out of interest, what scripts do you put in the <head> of your pages? When does the location requirement change?
I seem to always put scripts at the bottom of pages.

from knapsack.

bkaid avatar bkaid commented on September 23, 2024

Maybe you are right that this isn't actually needed. The only scripts I put in the are async inline scripts like those required to asynchronously load google analytics or the facebook javascript sdk. I guess what I am looking for that at first I thought Knapsack could also help with is a way for partial views to include async loading scripts for scripts like the Facebook sdk that aren't needed on every view.

from knapsack.

andrewdavey avatar andrewdavey commented on September 23, 2024

I'm still figuring out how Knapsack can and should be used :) So don't let me discourage you! The more ideas the better.
Registering scripts from a partial view is exactly one of the use cases I had in mind.

Can you clarify what you mean by async loading? Are you referring to script tags in the body with a defer attribute?

from knapsack.

bkaid avatar bkaid commented on September 23, 2024

If my particular view or partial view requires Facebook functionality, I need to add this code to my the end of my section:

<script> window.fbAsyncInit = function() { FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>

Same with pages that I want google analytics.

from knapsack.

andrewdavey avatar andrewdavey commented on September 23, 2024

There's an interesting problem with referencing things that need to be in <head> from a partial view. If partial view has been executed after the <head> has been rendered then any references it makes are missed. This is especially annoying for CSS references, since they must go in the head.

However, after quick test it seems that @Html.Partial("test") called from a content view page actually works! But the same partial, called from a Layout (or a layout-null view page, I assume) does not work.
A possible solution is to buffer the entire page output so we can still insert into head after the fact. I'll have a play with the code...

Regarding, your FB/Google analytics snippet do you need a way to embed the script rather than link to it? I can think of other use cases for this ability as well e.g. passing view data into JavaScript globals.

from knapsack.

andrewdavey avatar andrewdavey commented on September 23, 2024

Latest code (and nuget package) has support for script locations. Locations have to be defined at the module level, using web.config. For example:

    <scripts>
        <add path="scripts/base" location="head"/>
        <add path="scripts/lib" location="head"/>
        <add path="scripts/util" location="head"/>
        <add path="scripts/social" location="body"/>
    </scripts>
</knapsack>

Then in the layout:

    @Html.RenderScripts("head")
</head>
<body>
    ...
    @Html.RenderScripts("body")
</body>

Knapsack is now buffering the HTML output (using Response.Filter) so it can insert things into the <head> even from a partial view reference.

from knapsack.

Related Issues (17)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.