What's a good way to build a Backbone.js project? - javascript

We're currently kicking off our first Backbone.js project here at work. In fact it's our first major JavaScript project apart from the odd jQuery stuff.
Anyway, we struggle with the architecture for our stuff. What is the best way to sort stuff out?
We've started with having everything in separate files broken up in folders for; views, models, collections and routers and then we include everything in our index.html. The issue, though, is that this leaves us with having to check for the document ready event in every file. Is this the best way to do it?
Here's an example:
This is the file called PageModel, the first line seems wrong...
$(function(){
app.models.Page = Backbone.Model.extend({
//stuff
});
});
Then in our index.html we have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var app = app || {};
app.models = app.models || {};
app.collections = app.collections || {};
app.views = app.views || {};
app.routers = app.collections || {};
app.templates = app.templates || {};
app.models.griditems = app.models.griditems || {};
app.views.griditems = app.views.griditems || {};
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/libs/json2.js" type="text/javascript"></script>
<script src="assets/js/libs/underscore-1.1.7.min.js" type="text/javascript"></script>
<script src="assets/js/libs/backbone-0.5.3.min.js" type="text/javascript"></script>
<script src="assets/js/models/GridItemModel.js" type="text/javascript"></script>
<script src="assets/js/models/GalleryGridItemModel.js" type="text/javascript"></script>
<script src="assets/js/models/NewsGridItemModel.js" type="text/javascript"></script>
<script src="assets/js/models/VideoGridItemModel.js" type="text/javascript"></script>
<script src="assets/js/collections/GridCollection.js" type="text/javascript"></script>
<script src="assets/js/templates/Submenu.js" type="text/javascript"></script>
<script src="assets/js/templates/GalleryGridItemTemplate.js" type="text/javascript"></script>
<script src="assets/js/views/GridView.js" type="text/javascript"></script>
<script src="assets/js/views/GridItemView.js" type="text/javascript"></script>
<script src="assets/js/views/GalleryGridItemView.js" type="text/javascript"></script>
<script src="assets/js/views/VideoGridItemView.js" type="text/javascript"></script>
<script src="assets/js/routers/Router.js" type="text/javascript"></script>
<script src="assets/js/Application.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

This is structure we use in our Backbone projects
<!-- Libs Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery-1.5.2.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery.validate.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery.maskedinput-1.3.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery.mousewheel.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery.scrollpane.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/fileuploader.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/modernizr.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/json2.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/underscore-min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/backbone-min.js")"></script>
<!-- Libs Section -->
<!-- Core Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/config.js")"></script> <!-- Global configs -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/core.js")"></script> <!-- Core methods for easier working with views, models and collections + additional useful utils -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/app.js")"></script> <!-- Application object inherites core.js as prototype -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/renisans.js")"></script> <!-- Project Object. Creates Namespace and Extends it with project specific methods -->
<!-- Core Section -->
<!-- Routers Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/routers/workspace.js")"></script>
<!-- Routers Section -->
<!-- Models Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/models/profile.js")"></script>
...
<!-- Models Section -->
<!-- Collections Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/collections/messages.js")"></script>
...
<!-- Collections Section -->
<!-- Views Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/views/workspace.js")"></script>
...
<!-- Views Section -->
<!-- Localization Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/localizations/ru_RU.js")"></script>
<!-- Localization Section -->
<!-- Init Section -->
<script type="text/javascript">
$(function() {
Rens.container = $('.l-wrapper'); // Some parameters
Rens.init({
Localization: LocalizationStrings || {}, // Object with localization strings
Profile: {
// Bootstraping initial data to Profile model
}
});
});
</script>
<!-- Init Section -->
content of app.js
var App = function() {
this.Views = {};
this.Routers = {};
this.Models = {};
this.Collections = {};
this.User = {};
this.router = null;
this.view = null;
this.baseLocation = null;
this.beforeInit = function() {};
this.afterInit = function() {};
this.init = function(initData) {
if (typeof(this.beforeInit) === 'function') {
this.beforeInit.apply(this, arguments);
}
if (this.Views.Workspace) {
this.view = new this.Views.Workspace();
}
this.baseLocation = window.location.href.replace(/[?#].*/, '') == Config.web.host;
if (this.Routers.Workspace) {
this.router = new this.Routers.Workspace(initData);
}
this.view && this.view.setListeners && this.view.setListeners();
Backbone.history.start();
if (typeof(this.afterInit) === 'function') {
this.afterInit.apply(this, arguments);
}
}.bind(this);
};
App.prototype = Core;
and content of renisans.js
var Rens = new App();
$.extend(Rens, {
container: null,
Error: function(data) {
// Handling error
},
Localization: function(dictionary) {
return {
get: function(name) {
var argumentsList = Array.prototype.slice.call(arguments),
strings = argumentsList.slice(1),
text = this[name];
if (text && strings.length) {
$(strings).each(function(i, string) {
var reg = new RegExp('\\$' + i, 'go');
text = text.replace(reg, string);
});
}
return text || 'SLB.Localization.' + name + ' not found!';
}.bind(dictionary)
}
},
formatDate: function(rawDate) {
var timestamp = /\d+/.exec(rawDate)[0],
date = Rens.DateUTC(timestamp),
months = Rens.Localization.get('months');
return {
date: date,
fullDate: [date.dd, months[date.mm], date.hh].join(' '),
shortDate: [date.dd, date.MM, date.hh].join('.')
};
},
beforeInit: function(initData) {
this.Localization = new this.Localization(initData.Localization);
}
});
also simplified content of models/profile.js
Rens.Models.Profile = Backbone.Model.extend({
...
});

If you are creating an application of this shape, i strongly suggest to use dynamic loading of your assets, like javascript and more.
you have several options for this:
Require.js
LABjs
...
i myself have no experience with LABjs, but i've been using Require.js in smaller projects for myself. But have yet to use it in a major project.
the advantages of such a system:
you can work with dependancies, and your models or views will only be loaded when they are requested by another part of your code. not all at the beginning.
require.js also provides features for minifying and agregating your code based on the dependancies you specified.
require.js has a few small plugins for loading in text files (if you use a templating system this could be useful, or a plugin to define the order in which files need to be loaded.
and require.js also has a special version for working together with jquery and its modules. (but you are not required to use this one, you can load in jquery trough manually as well)
you will need to wrap your models / views / ... in modules so require.js can load them dynamically. I asked about this here on stack overflow last week... you can find the info on how to do that here
I suggest you read the 'getting started with require.js' and see if you feel like using it.
because working with all models / views / ... in separate files is quite handy in development fase, but is defenately not recommended when going into production. the fewer requests have to be sent by the browser to the server the better.

Related

Blazor server javascript not inserting elements as an MVC app would

I'm facing a little challenge here.
I'm trying to implement ads in my blazor server solution, and i cannot get it to work. So i've come up with a small MVC app where it works.
I must say that the blazor app is for a client i'm working for, and I don't know who supplies these adds. They send the code that i must implement for it to work.
Here is the stuff that they have asked me to implement in the head of the webpage
<script type="text/javascript">
var utag_data = {
}
</script>
<!-- Loading script asynchronously -->
<script type="text/javascript">
(function(a,b,c,d){
a='//partnerurl';
b=document;c='script';d=b.createElement(c);d.src=a;d.type='text/java'+c;d.async=true;
a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);
})();
</script>
<script async='async' src='https://macro.adnami.io/macro/spec/adsm.macro.someId.js'></script>
<script>
var adsmtag = adsmtag || {};
adsmtag.cmd = adsmtag.cmd || [];
</script>
<link rel="preconnect" href="https://cdn.cookielaw.org">
<link rel="preload" href="https://cdn.cookielaw.org/consent/tcf.stub.js" as="script"/>
<script src="https://cdn.cookielaw.org/consent/tcf.stub.js" type="text/javascript" charset="UTF-8"></script>
<link rel="preconnect" href="https://securepubads.g.doubleclick.net">
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
var googletag = window.googletag || {};
googletag.cmd = googletag.cmd || [];
window.yb_configuration = {"domain":"clientdomain"};
(function (y, i, e, l, d, b, I, R, D) {
d.Yieldbird = d.Yieldbird || {};
d.Yieldbird.cmd = d.Yieldbird.cmd || [];
l.cmd.push(function () {l.pubads().disableInitialLoad();});
b = i.createElement('script'); b.async = true;
b.src = (e === 'https:' ? 'https:' : 'http:') + '//jscdn.yieldbird.com/' + y + '/yb.js';
I = i.getElementsByTagName('script')[0];
(I.parentNode || i.head).insertBefore(b, I);
})('950dff97-bb8d-4667-952b-d72ce8bbe88b', document, document.location.protocol, googletag, window);
</script>
<script>
googletag.cmd.push(function () {
googletag.pubads().enableLazyLoad({
fetchMarginPercent: 150,
renderMarginPercent: 75,
mobileScaling: 1.5
});
});
</script>
And for each add placement i've received some html/javascript i must place at the location.
Heres an example:
<!-- /x,y/domain/domain.dk/billboard_1 -->
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js">
</script>
<script>
var googletag = googletag || {};googletag.cmd = googletag.cmd || [];
</script>
<script>
googletag.cmd.push(
function() {
var YBmapping = googletag.sizeMapping().addSize([931,0],[[930,180]]).addSize([0,0],[]).build();
googletag.defineSlot('/x,y/domain/domain.dk/billboard_1', [[930, 180]], 'div-gpt-ad-billboard_1').defineSizeMapping(YBmapping).addService(googletag.pubads());
googletag.enableServices();
});
</script>
<div id='div-gpt-ad-billboard_1'>
<script>
googletag.cmd.push(function() {
googletag.display('div-gpt-ad-billboard_1');});
</script>
</div>
I've obfuscted some variables. But i guess you get the hang of it..
This is from the MVC app, and it works. It places extra html inside my div with the div-gpt-ad-billboard_1 id. So on the website the HTML would look like this:
<div id="div-gpt-ad-billboard_1">
<script>
googletag.cmd.push(function() {
googletag.display('div-gpt-ad-billboard_1');});
</script>
<div id="google_ads_iframe_/x,y/domain/domain.dk/billboard_1_0__container__" style="border: 0pt none; width: 930px; height: 0px;"></div></div>
And if i deploy my MVC app to the live endpoint we have, an iFrame is inserted into the div with the google_ads_iframe Id, where the add is displayed.
Now on my blazor app, this doesn't happen.
I've created a blazor component which contains the ad i want to place. It looks like this:
<script async="async" suppress-error="BL9992" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js">
</script>
<script suppress-error="BL9992">
var googletag = googletag || {};googletag.cmd = googletag.cmd || [];
</script>
<script suppress-error="BL9992">
googletag.cmd.push(
function() {
var YBmapping = googletag.sizeMapping().addSize([931,0],[[930,180]]).addSize([0,0],[]).build();
googletag.defineSlot('x,y/domain/domain.dk/billboard_1', [[930, 180]], 'div-gpt-ad-billboard_1').defineSizeMapping(YBmapping).addService(googletag.pubads());
googletag.enableServices();
console.log(googletag);
});
</script>
<div id='div-gpt-ad-billboard_1'>
<script suppress-error="BL9992">
googletag.cmd.push(function() {
googletag.display('div-gpt-ad-billboard_1');});
</script>
</div>
As i understand it you cannot directly call script tags in blazor components, but they work if you add the suppress-error, and i can atleast get it to console log from them.
The head is the same in the blazor app as in the MVC app, as script tag works fine in _Host.cshtml in blazor.
The issue is that for my blazor app the ad component looks like this on the live endpoint:
<div id="div-gpt-ad-billboard_1"><script><!--!-->
googletag.cmd.push(function() { googletag.display('div-gpt-ad-billboard_1');});
</script></div>
Notice that the entire div with the google iframe ID is missing. It's as if it doesn't update anything. I've tried to call statehaschanged from OnInitializedAsync. Nothing happens, and i guess it makes sense, since nothing is probably added to the render tree that statehaschanged activates the rerendering of.
Does anyone have any idea, how i can get it to work like the MVC app ?

Sort files on gulp-inject index task

I am trying to sort my files since I am getting an Angular error because of the sort of the files.
This is my Gulp file
var gulp = require('gulp');
var angularFilesort = require('gulp-angular-filesort');
var naturalSort = require('gulp-natural-sort');
var inject = require('gulp-inject');
gulp.task('index', function () {
var target = gulp.src('./public/index.html');
var sources = gulp.src(
['./**/*.js', './**/*.css'],
{
read: false,
cwd: __dirname + "/public/",
}
).pipe(angularFilesort());
return target.pipe(inject(sources, { addRootSlash: false }))
.pipe(gulp.dest('./public'));
});
the files are sorting like this
<!-- inject:js -->
<script src="app.js"></script>
<script src="controllers/add.js"></script>
<script src="controllers/main.js"></script>
<script src="filters/fromNow.js"></script>
<script src="services/show.js"></script>
<script src="vendor/angular-cookies.js"></script>
<script src="vendor/angular-messages.js"></script>
<script src="vendor/angular-resource.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-strap.js"></script>
<script src="vendor/angular-strap.tpl.js"></script>
<script src="vendor/angular.min.js"></script>
<script src="vendor/moment.min.js"></script>
<!-- endinject -->
and here the folders
and the console errors
so what am I missing?
Drop the {read: false} option. gulp-angular-sort needs the file contents to function and read: false prevents those from being read.
From the docs:
NOTE Do not use the read option for gulp.src! This plugin analyzes the contents of each file to determine sort order.

Webpage is displaying curly braces from expressions using Angular1.4

As I'm new to Angular, I expect to run in to issues however this issue seems to be repeating itself off and on.
As I'm following a tutorial on learning Angular here, I was learning about how to use expressions.
What I'm attempting to do is access an gem's attributes and display them on the webpage. However, the object values are not being accessed and it is just displaying as so:
{{store.product.name}}
${{store.product.price}}
{{store.product.description}}
Add to Cart
Where as I want it to display as:
Dodecahaderon
$2.95
. . .
Add to Cart
I thought it may be due to the videos using Angular1.2 and I'm using 1.4 however I'm not sure. What am I doing wrong and how can I properly display the object attributes?
Here is the code:
(function () {
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.product = gem;
});
var gem = {
name: 'Dodecahaderon',
price: 2.95,
description: '. . . ',
canPurchase = true,
soldOut = true
};
})();
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body ng-controller="StoreController as store">
<div ng-hide="store.product.soldOut">
<h1>{{store.product.name}}</h1>
<h2>${{store.product.price}}</h2>
<p>{{store.product.description}}</p>
<button ng-show="store.product.canPurchase">Add to Cart</button>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Your angular library is not referenced correctly. Open your console window and make sure the angular script reference is actually working.
Currently gem is definied outside the scope of the controller. Also, as gem as an object you must change = to :
You need to change your code to this and it works
(function () {
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.item = {
name: 'Dodecahaderon',
price: 2.95,
description: '. . . ',
canPurchase : true,
soldOut : true
};
});
})();
And your html to this:
<!DOCTYPE html>
<html ng-app="store">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<div ng-hide="store.product.soldOut">
<h1>{{store.item.name}}</h1>
<h2>${{store.item.price}}</h2>
<p>{{store.item.description}}</p>
<button ng-show="store.item.canPurchase">Add to Cart</button>
</div>
</body>
</html>
Also, you may need to replace your reference to angular from <script type="text/javascript" src="angular.min.js"></script> to <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></sc‌​ript>

How to set Arcgis Javascript dojoConfig relative path of packages

I am using Arcgis Javascript API. API is built on dojo toolkit. So I need to use dojo features in API. I am preparing dojo config file as following.
var pathRegex = new RegExp("/\/[^\/]+$/");
var locationPath = location.pathname.replace(pathRegex, '');
var dojoConfig = {
async: true,
parseOnLoad: false,
baseUrl:"js/",
packages: [
{
name: "application",
location: locationPath + '/js/application'
}]
};
I created a bootstrapper.js like following.
require(["application/main", "dojo/domReady!"], function (application) {
console.log("bootstrapper is running");
application.Run();
})
And index.html file is like this.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Arcgis Javacsript API Samples</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
</head>
<body class="claro">
<div id="map"></div>
<script src="//js.arcgis.com/3.6/"></script>
<script src="js/application/djConfig.js"></script>
<script src="js/application/bootstrapper.js"></script>
</body>
</html>
My application is hosted on IIS and has addres like this htp://domain/Demo/Sample1/index.html
when I run application, this code giving error like following.
"NetworkError: 404 Not Found - http://js.arcgis.com/3.6/js/dojo/application/main.js"
If I set bootstrapper.js file as following, problem is solwing.
require(["js/application/main.js", "dojo/domReady!"], function (application) {
console.log("bootstrapper is running");
application.Run();
})
Try to change your script order in index.html file. Your config settings should load before CDN.
<div id="map"></div>
<script src="js/application/djConfig.js"></script>
<script src="//js.arcgis.com/3.6/"></script>
<script src="js/application/bootstrapper.js"></script>
</body>

How to setup Multi-page app with RequireJS with inline Javascript

I'm trying to convert a project to use requirejs instead of the solution I have below. Currently I have a layout page that contains all of the scripts at the bottom of the page (except modernizr) before the tag like this:
<head>
<script src="#Links.Assets.Scripts.Libraries.modernizr_2_6_2_js"></script>
</head>
<body>
<!-- Page content goes here -->
#RenderSection("PreScripts", false)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="#Links.Assets.Scripts.Libraries.jquery_1_9_1_min_js"><\/script>')</script>
<script src="#Links.Assets.Scripts.Libraries.jquery_namespace_js"></script>
<script src="#Links.Assets.Scripts.Libraries.jquery_unobtrusive_ajax_js"></script>
<script src="#Links.Assets.Scripts.Libraries.jquery_validate_js"></script>
<script src="#Links.Assets.Scripts.Libraries.jquery_validate_unobtrusive_js"></script>
<script src="#Links.Assets.Scripts.Libraries.jquery_timeago_js"></script>
<script src="#Links.Assets.Scripts.Libraries.toastr_js"></script>
<script src="#Links.Assets.Scripts.Views.Shared._master_js"></script>
#RenderSection("PostScripts", false)
#{
var errorMessage = TempData[TempDataConstants.ErrorMessage] as string;
var infoMessage = TempData[TempDataConstants.InfoMessage] as string;
var successMessage = TempData[TempDataConstants.SuccessMessage] as string;
if (!string.IsNullOrEmpty(errorMessage)) {
<script>
var origTimeOut = toastr.options.timeOut;
toastr.options.timeOut = 0;
toastr.error(#Html.Raw(Json.Encode(errorMessage)));
toastr.options.timeOut = origTimeOut;
</script>
}
if (!string.IsNullOrEmpty(successMessage)) {
<script>
var origTimeOut = toastr.options.timeOut;
toastr.options.timeOut = 0;
toastr.success(#Html.Raw(Json.Encode(successMessage)));
toastr.options.timeOut = origTimeOut;
</script>
}
if (!string.IsNullOrEmpty(infoMessage)) {
<script>
var origTimeOut = toastr.options.timeOut;
toastr.options.timeOut = 0;
toastr.info(#Html.Raw(Json.Encode(infoMessage)));
toastr.options.timeOut = origTimeOut;
</script>
}
}
</body>
In the individual pages that use this layout page I then populate the PostScripts section:
#section PostScripts {
// Javascript that belongs to a single page goes here.
}
Problems
I've followed this example but as you can see where I'm checking TempData on the server to see if its not null to popup a toastr message on the client. I"m not really sure the best way to go about doing this and have tried many things. Any ideas?

Categories

Resources