Is it possible to create more than one HTML file (with relative JS & WASM modules) from a single Yew project. For example, here I create one artifact with the following:
fn main() {
yew::Renderer::<App>::new().render();
}
Is it possible to make multiple instance of this and create few HTML output?
What do you mean by [create more than one HTML file]?
each time you call the render it will render your page components.
if you did multiple calls, the components will be duplicated on the same page.
example:
fn main() {
yew::Renderer::<App>::new().render();
yew::Renderer::<App>::new().render();
}
if you wanna build the entire application use router to switch between the pages.
Related
I'm currently making a web application with Asp.net MVC 5 (.Net Framework 4.6) and AngularJS 2.0 .
I take care the back-end and my friend takes care the front-end.
Now, he sends me 3 js files, 1 html file.
Can anyone help me to import those file to MVC 5 please ?
Thank you,
I´m assuming you are new to MVC...
Create a new MVC project.
Copy your js files to Scripts. (Drag from explorer to visual studio)
The best way to go with js is to make a bundle:
In app_start, open BundleConfig.cs
Create a new Bundle like this:
bundles.Add(new ScriptBundle("~/bundles/mybundle").Include(
"~/Scripts/myjs1.js",
"~/Scripts/myjs2.js",
"~/Scripts/myjs3.js"));
Now to render this bundle, open Views->Shared->_Layout.cshtml
Go to the bottom, find #Scripts.Render("~/bundles/jquery")
Add your bundle: #Scripts.Render("~/bundles/mybundle") Now, your js is available to all pages.
We need to create a controller. Right click Controllers folder -> add -> Controller
Select MVC5 Controller Empty.
Give it the name you like for this page.
You will see this:
public class testeController : Controller
{
// GET: teste
public ActionResult Index()
{
return View();
}
}
11. Right Click the Index in the code -> click in add View
12. VS will open the view. Paste your HTML here.
You are good to go!
Things to keep in mind 1 - ROUTES:
MVC default route (URL) is /controller/Action/id
In the example above, your url will be: /teste or /teste/index because it´s the controllers name.
If not provided MVC uses Home as controller name and Index as action name and id is optional.
So, if your page is the home page for the site put it in the Views -> Home -> index.cshtml
Things to keep in mind 2 - BUNDLES:
Bundles are available for all pages, if you need your js in only one page, to this:
Open your View, go to the bottom of the file and do this:
#section scripts{
<script src="~/Scripts/js1.js"></script>
<script src="~/Scripts/js2.js"></script>
<script src="~/Scripts/js3.js"></script>
}
Things to keep in mind 2 - LAYOUT:
MVC works divides your content into 2 files, stuff common to all pages, like navigation bar, footer, css and js calls reside in:
Views -> Shared -> _Layout.cs
Views are the changeable content in the middle of the page, look for the method #RenderBody() in _Layout.cshtml to find where your view will be rendered.
Maybe you will have to divide your friend´s html to have some in _layout and some in the View. This is quite common.
Good luck and Happy Coding!!
Sure,
Create an ../app folder and drop the js files
The html file you have, I suggest you copy paste its content into a razor view, ../Views/App/MyPage.cshtml
Then create a c# controller that will return that view AppController
public class AppController : Controller
{
public ActionResult MyPage()
{
return PartialView();
}
Like this https://github.com/victorantos/AngJobs/blob/master/AngJobs/Controllers/AppController.cs
Another important note, make sure your router is configured properly, like this
https://github.com/victorantos/AngJobs/blob/master/AngJobs/App_Start/RouteConfig.cs
I am using gulp to compile Jade for a static website. There is a single gulp task that compiles all the jade files into HTML files.
I am creating a 10 step process, each a single page of HTML with "previous" and "next" buttons
I want to create a partial like below
a(href="#{prev}") Back
a(href="#{next}") Continue
For each page, the prev and next values change. Is there a way to call the partial from within each page's jade with custom prev and next values?
I am assuming, like how you bind data in handlebars template and compile, I can have a different locals object for each page and render the same partial with different data.
Am I approaching this wrong or is this something possible with jade? All answers I can see are related to using express with Jade. I'm only creating a static website, just the HTML alone infact.
If you're including the partial within larger Jade templates via include then it's simply a matter of changing the locals for the larger template you're rendering.
gulp.src('./templates/template-that-includes-a-partial.jade')
.pipe(gulpJade({
locals: {
prev: 'some value',
next: 'some other value'
}
})
.dest('./build/templates/');
Something like that should work. The partial view should have access to the same locals as the parent view that includes it.
I found out that you can define Jade variables using - in the parent template and call the partial with this data
- var prev = "a.html"
- var next = "b.html"
include partials/_var
And then use interpolation in the partial to use corresponding values
a(href="#{prev}") Prev
a(href="#{next}") Next
This way, I can call the same partial in different parent templates but pass in varying values for each page.
I have a lot of landings in my application, where in index page I have to change some parameters in hrefs according to users GET query.
So, in views folder i have a lot different ./pattterns/pattern1/index.ejs for each single web page and in assets folder
I have ./patterns/pattern1/static-css-and-img-and-etc.
Now, the problem is I need to fix all links from pattern1/index.ejs to this static files, because by default static is searched in /assets/ and I can't figre out how to point in every other rending of view to specific /assets/patterns/pattern1/ folder to fetch static from.
Any suggestions would be appreciated)
You can overwrite the "layout"-setting in the render-call:
var templatetype = "patterns/pattern1/";
data = {
....
layout: templatetype + "index.ejs"
};
res.view(templatetype +"mysite",data);
In this example SailsJS is looking for "patterns/pattern1/index.ejs" and render this with "patterns/pattern1/mysite.ejs"
I need to include a javascript file right at the end of the xpage so it gets loaded after the XSP.addOnLoad event code which is generated automatically e.g.
XSP.addOnLoad(function() {
XSP.attachEvent....
}
<script src="my.js">
Ideally I want to include it as part of a theme but if I do that it goes into the HEAD section
So can I either..
-Specify in a theme to insert the link to a client side js resource at the bottom of the page rather than the head
-Include a resource on an xpage directly so it goes after the auto-generated code
NB: This it needed in order to get an xpages app working with Foundations
http://foundation.zurb.com/docs/
I need to include the foundations js file after the events have been bound to the fields
Thanks!
Try adding a script block in the end with this code:
XSP.addOnLoad(function() {
document.write('<script src="my.js">');
}
However this may execute before the generated XSP.addOnLoad. You could then try a small hack like this:
XSP.addOnLoad(function() {
setTimeout(document.write('<script src="my.js">'), 200);
}
In asp.net webpages framework what is the difference between using a content block versus a helper?
They both seem to be used to output HTML to multiple pages. They both can contain code and both can pass parameters.
Are there other differences? When should you use a helper versus a content block?
More info:
With Content Blocks we create a .cshtml (for example _MakeNote.cshtml) file to hold the content we want to insert into a page. Then we use:
#RenderPage("/Shared/_MakeNote.cshtml")
to insert the content into a page. We can pass parameters to the content block like this:
#RenderPage("/Shared/_MakeNote.cshtml", new { content = "hello from content block" })
It's somewhat like an include file, but I think does not share scope with the parent page.
With Helpers we create a .cshtml page in the App_Code folder (for example MyHelpers.cshtml) and place methods in that page which we want to call. The method looks something like this:
#helper MakeNote(string content) {
<div>#content</div>
}
The helper is called by using:
#MyHelpers.MakeNote("Hello from helper")
There isn't a lot of difference functionally. Helpers need to go into an App_Code folder - unless you download VWD or Visual C# Express and compile a binary - and the App_Code folder doesn't translate well to the MVC framework. Of course, that's only relevant if you want to upgrade to MVC at some point.
I would use a helper for generic functional snippets like your MakeNote. I would use a "content-block" (partial, really) for repeated site-specific sections of a page.