Where to store HTML templates for use in Backbone.js - javascript

I'm currently developing a static site (no backend or server stuff) with Backbone.js and Middleman. The site doesnt have any dynamic content, just plain html code. But it has some transitions between pages and some Javascript effects.
So I want to make use of Backbones Router for the history and want to append the views dynamically to the DOM with Backbone views. So far so good.
Now I was wondering where to store the HTML parts of the site, so that Backbone can use it. With Inline script tags I think it gets too messy, so I want to swap it out in different HTML files. Now I could dynamically load the HTML files via requirejs, but I think it would be better to pack all the HTML stuff in one JS file and load it the first time someone visits the page.
How could something like this be done? Or does anybody have a better solution?

If you are developing a HTML5 application, then you can use application offline cache to fetch all the necessary HTML files and other resources. It involves writing a cache manifest file.
The following website provides a nice description of the offline feature and writing the manifest file: http://diveintohtml5.info/offline.html.

Personally I seperate all the parts of backbone in different folders. So for the templates I put each and one of them in a seperate files in a template folder. That way while developing everything is clean. I load them by using "text!" functionality in require.js.
When I want to put the project in development I use the optimization part of require.js which minifies and combines all the files for me.
Hope that helped.

After a lot of researche, I'm doing it this way:
Store templates as .jst.ejs in template folder
include them with Sprockets
use JST to load the templates
In backbone I use the views class to extend new views and use the templates:
App.Views.Layout.Logo = Backbone.Views.extend({
template: JST['templates/layout/logo'],
el: "#logo",
});

Related

Load view-specific JavaScript in Node.js Express application

I have web application with multiple views that share the same JavaScript but every view also have its own Javascript. It looks something like:
<!-- html up here -->
<script src="/src/js/bundle.js"></script>
<script>
// some view-specific Javascript
</script>
This ended up mixing my view file (HTML, etc) with my javascript and I'm not sure if creating and loading and external javascript file for each view is a better way.
What is the best approach to achieve do this?
A lot of it depends on how big your page specific js files are. If they are fairly small and most of the useful js is in your bundle, just make one bundle for all pages. If you have a lot of page specific js, you can either just include a second file along with your bundle, or you can create a different bundle for each page so that you only have on script tag on each page. Here is another thread on the issue, including a useful gulp script to automate the creation of multiple bundles

Bundles and Virtual Paths

I am setting up a new site using angular, mvc and web api. The static content (js, css, images, etc) will be in Site A, the MVC site will be in Site B and the api will be in Site C. These are all separate sites, not virtual directories. I'm trying to use bundling in the MVC site to bundle the js and css files from the static site for use in the MVC site.
I've set up a Virtual Path Provider but when I load the site angular doesn't work and also doesn't throw any errors. I'm assuming that the angular.js file is not being loaded from the bundle because if I include a local javascript file angular works.
Is what I want to do possible? If so, how?
Virtual Path Providers only apply to views, not things like CSS and JS. Unfortunately, there's not really a good way to handle this scenario. The bundler can only act on files within the same project, not those in a separate project. If you want a separate site to handle your static assets, then you pretty much just have to resort to referencing them directly. You can use the Web.config's app settings section to set the base URL for your static site (that way you have just one place to go if you need to change it later and you can do things like run transforms on it to have a different value in production). This also means you're somewhat on your own for bundling and minification. However, you can make your static site an MVC site as well just to get the bundling infrastructure and then use that site to handle bundling. All your bundles should be at the standard location of /Content/[style bundle name].css or /bundles/[script bundle name].js. There's a cache busting string added to the path, but you can somewhat handle that manually.

Grabbing HTML from another page

I have two HTML files: One acts as a template, supplying the navigation, sidebars, etc., and the other has the main content. I'm trying to figure out how best to insert the content into the template. I need persistent URLs, so my plan was to have the content page essentially replace itself with the template, plugging the text back into the resulting page. I'm really new to front-end programming and I'm suspicious that this may be an anti-pattern, so my first question is about whether I'm barking up the right tree. The problem seems universal, and I'm sure there must be a best practice, though I haven't yet seen it discussed. If this is an acceptable way to proceed, then what JavaScript function would allow me to access the HTML of two different pages at the same time?
[EDIT: It's a small page on GitHub]
Do not do this. At current implementation HTML is not designed to be template engine. You can use HTML import but it has not full support in browsers. (compatibility table).
Usually this problem can be solved with:
Use frontend framework. Libraries like angular.js or polymer.js (and so on) usually has support of importing HTML documents in different forms.
Build your application HTML. Task runners like grunt.js usually has plugin that includes HTML.
Use server side technologies to extend your HTML from base layouts
If your application have to be consisted from different HTMLs I recommend you to try polymer. It is polyfill for web components and designed to work in such way by default.
UPD:
About edit to your question. It seems like you just need template engine for HTML. You can google for it. I use nunjucks - javascript port of python's template engine jinja2. It is lightweight, simple and can be compiled right in browser.
Another way is to use special tools for building static web pages. You have mentioned that your page is blog build from simple HTML pages. Try to use pelican. It is the static websites (blogs) generator. It is simple and fast. You can build your HTML even on your local machine and just push your HTML pages to github.

Merging HTML files in a SinglePage application

I'm developing pure JS + HTML application. To keep the code clean I would like to separate my application into the several html files (i.e. ClientView.html, HistoryView.html etc). Based on user actions one or another view (or several views) would be displayed. Each view is supposed to have an underlying code in a separate JS file.
What I really want to achieve is following:
Develop view as HTML page (do not use any kind of javascript templating)
Views and viewmodels are loaded on the fly (only loaded when needed)
Some way to control dependencies.
I would be very thankful if you advice me a good start for that, as I'm quite new to modern html applications development. I myself is from WPF world, and I've been working with MVVM applications for a very long time, probably I'm wrong trying to bring same experience to javascript development.
I've found several posts about "compiling" html - (HTML "compiler" / merging application), but I don't think that it is what I need.
p.s. In my project I'm very dependent from several features from Twitter Bootsrap (first of all from grid systems)
Use a master page which contains some div to make the layout. Use JQuery to dynamically load various pages and insert into the div in the master page as required.

MVC - is there a nice way to bundle controls with their respective javascript?

I'm pretty new to MVC and I can't decide on the best way to store cshtml files and their respective javascript code. Some JS code in my project needs to run globally, but most of it is entirely tied to specic views or partial views.
If I put the javascript in the views, I get a mess of inline uncacheable javascript, if I put it in one central file, I lose modularity.
I heard that in MVC4 there are going to be minification features, is there something I can do with MVC3 that will allow me to choose in the Views which javascripts to include and then group them and minify them automatically? (maybe even in groups?)
Cassette it's essentially the same thing as the upcoming MVC4 bundles.
In your view page, you can reference scripts and stylesheets using Cassette's Bundles helper class.
#{
Bundles.Reference("Scripts/jquery.js");
Bundles.Reference("Scripts/page.js");
Bundles.Reference("Styles/page.css");
}
<!DOCTYPE html>
<html>
...
In addition, Cassette has native support for Less and CoffeScript. It has also support for HTML Templates, if you are interested in client side MVC frameworks like Knockout.js or Backbone.js.
Still you have to choose how to group your content. As the official documentation is suggesting, probably the best choice is to treat bundles as units of deployment.
Keep in mind that a bundle is a unit of deployment. If any asset in a bundle changes, then the entire bundle has to be downloaded again by web browsers. So perhaps group shared code into a bundle and put page scripts into their own bundles.
You can put the javascript in separate files, for each view. Then in the _Layout.cshtml enter a #RenderSectionto the head:
<head>
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
#RenderSection("head",false)
</head>
Then in each view, you can put a section that will be rendered into the header:
#section head{
<script src="#Url.Content("~/ViewScripts/Order/New.js")" type="text/javascript"></script>
}
You'll want to use a method like this:
http://www.viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution/
See this post:
Using Rails 3.1, where do you put your "page specific" javascript code?
It is not a best practice to use script in partials (in my point of view)
is suggest you to write partial specific script to separate js and bind events on page load or if partial was loaded via ajax then on success event.
then you can be sure that events are not bound multiple times and view is just a view
#Anders approach is good if you require the scripts to be in the head tag. But I find that most times it is not required if it is page specific JavaScript. You can put your script tags that reference your script files wherever they are required in the View. Automatically bundling and minification will be supported in ASP.NET 4.5. Until that time you can integrate yuicompressor into Visual Studio.

Categories