Comments (8)
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.
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.
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.
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.
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.
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.
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.
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)
- Files not being removed when references are removed HOT 2
- The order in module.txt should have the highest priority HOT 3
- Images in stylesheets HOT 5
- Ignore hidden and empty folders HOT 3
- Html template module
- Better exception messages HOT 2
- External script references HOT 1
- Use Moq throughout unit tests
- Html helpers syntax differs from MVC built-ins HOT 2
- Dependencies between JS and CSS HOT 1
- Protocol-relative URLs HOT 2
- Path.Combine breaks when path ends with a *
- Knapsack incompatible with Glimpse. HOT 1
- Sass support? HOT 1
- Resource Not Found HOT 2
- Knapsack and WebForms HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from knapsack.