Search Results

Search found 40 results on 2 pages for 'requirejs'.

Page 1/2 | 1 2  | Next Page >

  • Mock RequireJS define dependencies with config.map

    - by Aligned
    Originally posted on: http://geekswithblogs.net/Aligned/archive/2014/08/18/mock-requirejs-define-dependencies-with-config.map.aspxI had a module dependency, that I’m pulling down with RequireJS that I needed to use and write tests against. In this case, I don’t care about the actual implementation of the module (it’s simple enough that I’m just avoiding some AJAX calls). EDIT: make sure you look at the bottom example after the edit before using the config.map approach. I found that there is an easier way. I did not want to change the constructor of the consumer as I had a chain of changes that would have to be made and that would have been to invasive for this task. I found a question on StackOverflow with a short, but helpful answer from “Artem Oboturov”. We can use the config.map from RequireJs to achieve this. Here is some code: A module example (“usefulModule” in Common/Modules/usefulModule.js): define([], function() { "use strict"; var testMethod = function() { ... }; // add more functionality of the module return { testMethod; } }); A consumer of usefulModule example: define([ "Commmon/Modules/usefulModule" ], function(usefulModule) { "use strict"; var consumerModule = function(){ var self = this; // add functionality of the module } }); Using config.map in the html of the test runner page (and in your Karma config –> I’m still trying to figure this out): map: {'*': { // replace usefulModule with a mock 'Common/Modules/usefulModule': '/Tests/Specs/Common/usefulModuleMock.js' } } With the new mapping, Require will load usefulModuleMock.js from Tests/Specs/Common instead of the real implementation. Some of the answers on StackOverflow mentioned Squire.js, which looked interesting, but I wasn’t ready to introduce a new library at this time. That’s all you need to be able to mock a depency in RequireJS. However, there are many good cases when you should pass it in through the constructor instead of this approach.   EDIT: After all that, here’s another, probably better way: The consumer class, updated: define([ "Commmon/Modules/usefulModule" ], function(UsefulModule) { "use strict"; var consumerModule = function(){ var self = this; self.usefulModule = new UsefulModule(); // add functionality of the module } }); Jasmine test: define([ "consumerModule", "/UnitTests/Specs/Common/Mocks/usefulModuleMock.js" ], function(consumerModule, UsefulModuleMock){ describe("when mocking out the module", function(){ it("should probably just override the property", function(){ var consumer = new consumerModule(); consumer.usefulModule = new UsefulModuleMock(); }); }); });   Thanks for letting me think out loud :-).

    Read the article

  • Moving Function With Arguments To RequireJS

    - by Jazimov
    I'm not only relatively new to JavaScript but also to RequireJS (coming from string C# background). Currently on my web page I have a number of JavaScript functions. Each one takes two arguments. Imagine that they look like this: functionA(x1, y1) { ... } functionB(x2, y2) { ... } functionC(x3, y3) { ... } Currently, these functions exist in a tag on my HTML page and I simply call each as needed. My functions have dependencies on KnockoutJS, jQuery, and some other JS libraries. I currently have Script tags that synchronously load those external .js dependencies. But I want to use RequireJS so that they're loaded asynchronously, as needed. To do this, I plan to move all three functions above into an external .js file (a type of AMD "module") called MyFunctions.js. That file will have a define() call (to RequireJS's define function) that will look something like this: define(["knockout", "jquery", ...], function("ko","jquery", ...) {???} ); My question is how to "wrap" my functionA, functionB, and functionC functions where the ??? is above so that I can use those functions on my page as needed. For example, in the onclick event handler for a button on my HTML page, I would want to call functionA and pass two it two arguments; same for functionB and functionC. I don't fully understand how to expose those functions when they're wrapped in a define that itself is located in an external .js file. I know that define assures that my listed libraries are loaded asynchronously before the callback function is called, but after that's done I don't understand how the web page's script tags would use my functions. Would I need to use require to ensure they're available, such as: require(["myfunctions"],function({not sure what to put here})] I think I understand the basics of RequireJS but I don't understand how to wrap my functions so that they're in external .js files, don't pollute the global namespace, and yet can still be called from the main page so that arguments can be passed to them. I imagine they're are many ways to do this but in reviewing the RequireJS docs and some videos out there, I can't say I understand how... Thank you for any help.

    Read the article

  • RequireJS: JavaScript for the Enterprise

    - by Geertjan
    I made a small introduction to RequireJS via some of the many cool new RequireJS features in NetBeans IDE. I believe RequireJS, and the modularity and encapsulation and loading solutions that it brings, provides the tools needed for creating large JavaScript applications, i.e., enterprise JavaScript applications. <span id="XinhaEditingPostion"></span> (Sorry for the wobbly sound in the above.) An interesting comment by my colleague John Brock on the above: One other advantage that RequireJS brings, is called lazy loading of resources. In your first example, everyone one of those .js files is loaded when the first file is loaded in the browser. By using the require() call in your modules, your application will only load the javascript modules when they are actually needed. It makes for faster startup in large applications. You could show this by showing the libraries that are loaded in the Network Monitor window. So I did as suggested: Click the screenshot to enlarge it and notice how the Network Monitor is helpful in the context of RequireJS troubleshooting.

    Read the article

  • Loading Youtube Iframe API with RequireJS

    - by davidgnin
    I'm trying to use the Youtube Iframe API inside a module definded with Require JS. As this API is loaded async and calls a function once is loaded, I used a requireJS plugin called "async", that worked before with google maps api. However, this time something isn't working. My module starts this way: define(['text!fmwk/widgets/video/video.html','fmwk/utils/browser','async!http://www.youtube.com/iframe_api'], function (videoTpl,root) { ... }); and chrome console fires this error: Uncaught Error: Load timeout for modules: async!http://www.youtube.com/iframe_api_unnormalized3,async!http://www.youtube.com/iframe_api http://requirejs.org/docs/errors.html#timeout If I don't use async plugin the object YT or its functions are undefinded, and the same happens if I download the API code. The API is loaded sometimes if I put an script tag in the head tag of the html file. All this is expected, but I don't understand because async plugin fails. Thank you for your attention and help :)

    Read the article

  • Typescript + requirejs: How to handle circular dependencies?

    - by Aymeric Gaurat-Apelli
    I am in the process of porting my JS+requirejs code to typescript+requirejs. One scenario I haven't found how to handle is circular dependencies. Require.js returns undefined on modules that are also dependent on the current and to solve this problem you can do: MyClass.js define(["Modules/dataModel"], function(dataModel){ return function(){ dataModel = require("Modules/dataModel"); ... } }); Now in typescript, I have: MyClass.ts import dataModel = require("Modules/dataModel"); class MyClass { dataModel: any; constructor(){ this.dataModel = require("Modules/dataModel"); // <- this kind of works but I lose typechecking ... } } How to call require a second time and yet keep the type checking benefits of typescript? dataModel is a module { ... }

    Read the article

  • SpineJS and RequireJS

    - by ot3m3m
    I am using require.js 2.0. I have the following code that is called initially by require: app.js requirejs.config({ paths: { app: '..', spine: 'spine_src/spine', cs: "cs", }, shim: { 'spine_src/route': { deps: ['spine'] } } }); // Start the main app logic. requirejs(['cs!app/StartApp_Admin', 'spine','spine_src/route'], function (StartApp_Admin, Spine, Route) { { new StartApp_Admin(); } }); And the following controller: StartApp_Admin define () -> class StartApp_Admin extends Spine.Controller constructor: -> @routes "/twitter/:id": (params) -> console.log("/users/", params.id) Spine.Route.setup() When I execute the application I get the following error in my spine route library file (route.js). The application breaks when I call Spine.Route.setup() Uncaught TypeError: Object function (element) {return element;} has no method 'extend' Any help would be greatly appreciated

    Read the article

  • jquery and requirejs and knockout; reference requirejs object from within itself

    - by Thomas
    We use jquery and requirejs to create a 'viewmodel' like this: define('vm.inkoopfactuurAanleveren', ['jquery', 'underscore', 'ko', 'datacontext', 'router', 'messenger', 'config', 'store'], function ($, _, ko, datacontext, router, messenger, config, store) { var isBusy = false, isRefreshing = false, inkoopFactuur = { factuurNummer: ko.observable("AAA") }, activate = function (routeData, callback) { messenger.publish.viewModelActivated({ canleaveCallback: canLeave }); getNewInkoopFactuurAanleveren(callback); var restricteduploader = new qq.FineUploader({ element: $('#restricted-fine-uploader')[0], request: { endpoint: 'api/InkoopFactuurAanleveren', forceMultipart: true }, multiple: false, failedUploadTextDisplay: { mode: 'custom', maxChars: 250, responseProperty: 'error', enableTooltip: true }, text: { uploadButton: 'Click or Drop' }, showMessage: function (message) { $('#restricted-fine-uploader').append('<div class="alert alert-error">' + message + '</div>'); }, debug: true, callbacks: { onComplete: function (id, fileName, responseJSON) { var response = responseJSON; }, } }); }, invokeFunctionIfExists = function (callback) { if (_.isFunction(callback)) { callback(); } }, loaded = function (factuur) { inkoopFactuur = factuur; var ids = config.viewIds; ko.applyBindings(this, getView(ids.inkoopfactuurAanleveren)); /*<----- THIS = OUT OF SCOPE!*/ / }, bind = function () { }, saved = function (success) { var s = success; }, saveCmd = ko.asyncCommand({ execute: function (complete) { $.when(datacontext.saveNewInkoopFactuurAanleveren(inkoopFactuur)) .then(saved).always(complete); return; }, canExecute: function (isExecuting) { return true; } }), getView = function (viewName) { return $(viewName).get(0); }, getNewInkoopFactuurAanleveren = function (callback) { if (!isRefreshing) { isRefreshing = true; $.when(datacontext.getNewInkoopFactuurAanleveren(dataOptions(true))).then(loaded).always(invokeFunctionIfExists(callback)); isRefreshing = false; } }, dataOptions = function (force) { return { results: inkoopFactuur, // filter: sessionFilter, //sortFunction: sort.sessionSort, forceRefresh: force }; }, canLeave = function () { return true; }, forceRefreshCmd = ko.asyncCommand({ execute: function (complete) { //$.when(datacontext.sessions.getSessionsAndAttendance(dataOptions(true))) // .always(complete); complete; } }), init = function () { // activate(); // Bind jQuery delegated events //eventDelegates.sessionsListItem(gotoDetails); //eventDelegates.sessionsFavorite(saveFavorite); // Subscribe to specific changes of observables //addFilterSubscriptions(); }; init(); return { activate: activate, canLeave: canLeave, inkoopFactuur: inkoopFactuur, saveCmd: saveCmd, forceRefreshCmd: forceRefreshCmd, bind: bind, invokeFunctionIfExists: invokeFunctionIfExists }; }); On the line ko.applyBindings(this, getView(ids.inkoopfactuurAanleveren)); in the 'loaded' method the 'this' keyword doens't refer to the 'viewmodel' object. the 'self' keyword seems to refer to a combination on methods found over multiple 'viewmodels'. The saveCmd property is bound through knockout, but gives an error since it cannot be found. How can the ko.applyBindings get the right reference to the viewmodel? In other words, with what do we need to replace the 'this' keyword int he applyBindings. I would imagine you can 'ask' requirejs to give us the ealiers instantiated object with identifier 'vm.inkoopfactuurAanleveren' but I cannot figure out how.

    Read the article

  • missing event when using modules with requirejs

    - by ali haider
    I had javascript code in a single JS file that was working fine (using XHR/AJAX). When I split it up into separate modules in a requirejs application, I do not seem to get a handle on the event object & it shows up as undefined (testing in firefox 29.0.1). Calling module: ajax.onreadystatechange = new ajaxResponse().handleAjaxResponse(e); ajaxResponse define(["require", './url/urlCommon'], function(require, urlCommon) { 'use strict'; var ajaxResponse = function() { var ajax = null; // e = event || window.event; this.handleAjaxResponse = function() { if (typeof event === 'undefined') { var event = event || window.event; } console.log('e is now:' + typeof e); I also do not have a handle on the event in the handleAjaxResponse method (error: undefined). Any thoughts on what I need to do to troubleshoot/fix this will be greatly appreciated.

    Read the article

  • How do I use namespaces in Backbone with RequireJs

    - by dev.pus
    I am unsure how I use namespaces in an modularized (RequireJs) Backbone environment. I have thought a bit how it could look like but am totally unsure if this is the right way. app.js (getting executed by main.js) define('App', ['underscore', 'backbone', 'Router'], function( _, Backbone, Router){ function initialize(){ var app = {}; // app is the global namespace variable, every module exists in app app.router = new Router(); // router gets registered Backbone.history.start(); } return { initialize: initialize } }); messages.js define('MessageModel', ['underscore', 'backbone', 'App'], function(_, Backbone, App){ App.Message.Model; // registering the Message namespace with the Model class App.Message.Model = Backbone.Model.extend({ // the backbone stuff }); return App; }); Is this the right approach or am I fully on the wrong way (if yes please correct me!)

    Read the article

  • Starting an ASP.NET MVC 4 project. Is it necessary to use RequireJS if I'm using bundling?

    - by SCS
    If RequireJS makes it so that multiple js files are combined into a single main.js file, is it essentially the same as ASP.NET's script bundling functionality? Would the only bonus of using RequireJS in addition to bundling be the ability to have certain scripts be loaded according to RequireJS configuration? I'm very new to both bundling and RequireJS, but after doing some reading, it seems like bundling takes care of multiple requests to load several js files. Are there any other things I might be missing out on with regards to using RequireJS with bundling?

    Read the article

  • requireJS : How to structure Javascript for an entire site?

    - by pagewil
    I have 3000+ lines of javascript that I need to get into a sensible/maintainable structure. I have chosen to use requireJS as it has been recommend to me by a few people. I have a bunch of variables that are used throughout the application and need to be available everywhere. I also have a bunch of functions that need to be available everywhere. Apart from these two dependencies most of the code can be divided off into their own modules. I am having trouble understanding how to manage my main variables so that if one module of code makes changes to the variables the rest of the JS modules will see that change. I think I need to see a few examples that demonstrate how requireJS is intended to work on a larger scale that the examples in the documentation. If anyone is an experienced requireJS user I would love the hear your tips!

    Read the article

  • Always require a plugin to be loaded

    - by axon
    I am writing an application with RequireJS and Knockout JS. The application includes an extension to knockout that adds ko.protectedObservable to the main knockout object. I would like this to always be available on the require'd knockout object, and not only when I specify it in the dependencies. I could concat the files together, but that seems that it should be unnecessary. Additionally, I can put knockout-protectedObservable as a dependency for knockout in the requirejs shim configuration, but that just leads to a circular dependency and it all fails to load. Edit: I've solved me issue, but seems hacky, is there a better way? -- Main.html <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(['knockout'], function(ko) { require(['knockout-protectedObservable']); }); </script> -- knockout-protectedObservable.js define(['knockout'], function(ko) { ko.protectedObservable = { ... }; });

    Read the article

  • Backbone JS central model where all views can use

    - by chchrist
    I am new to backbone js and require js. I use requirejS to organize my backbone code into modules. I don't know if this has any importance to what I want though. I want to have a central model where all my views will have access to. They should be able to get and set values. I don't want to use it as each view model though. I need to keep in memory search options, user status (logged in/out) etc. Any ideas? EDIT Maybe the answer is here? Share resources across different amd modules

    Read the article

  • Using Durandal to Create Single Page Apps

    - by Stephen.Walther
    A few days ago, I gave a talk on building Single Page Apps on the Microsoft Stack. In that talk, I recommended that people use Knockout, Sammy, and RequireJS to build their presentation layer and use the ASP.NET Web API to expose data from their server. After I gave the talk, several people contacted me and suggested that I investigate a new open-source JavaScript library named Durandal. Durandal stitches together Knockout, Sammy, and RequireJS to make it easier to use these technologies together. In this blog entry, I want to provide a brief walkthrough of using Durandal to create a simple Single Page App. I am going to demonstrate how you can create a simple Movies App which contains (virtual) pages for viewing a list of movies, adding new movies, and viewing movie details. The goal of this blog entry is to give you a sense of what it is like to build apps with Durandal. Installing Durandal First things first. How do you get Durandal? The GitHub project for Durandal is located here: https://github.com/BlueSpire/Durandal The Wiki — located at the GitHub project — contains all of the current documentation for Durandal. Currently, the documentation is a little sparse, but it is enough to get you started. Instead of downloading the Durandal source from GitHub, a better option for getting started with Durandal is to install one of the Durandal NuGet packages. I built the Movies App described in this blog entry by first creating a new ASP.NET MVC 4 Web Application with the Basic Template. Next, I executed the following command from the Package Manager Console: Install-Package Durandal.StarterKit As you can see from the screenshot of the Package Manager Console above, the Durandal Starter Kit package has several dependencies including: · jQuery · Knockout · Sammy · Twitter Bootstrap The Durandal Starter Kit package includes a sample Durandal application. You can get to the Starter Kit app by navigating to the Durandal controller. Unfortunately, when I first tried to run the Starter Kit app, I got an error because the Starter Kit is hard-coded to use a particular version of jQuery which is already out of date. You can fix this issue by modifying the App_Start\DurandalBundleConfig.cs file so it is jQuery version agnostic like this: bundles.Add( new ScriptBundle("~/scripts/vendor") .Include("~/Scripts/jquery-{version}.js") .Include("~/Scripts/knockout-{version}.js") .Include("~/Scripts/sammy-{version}.js") // .Include("~/Scripts/jquery-1.9.0.min.js") // .Include("~/Scripts/knockout-2.2.1.js") // .Include("~/Scripts/sammy-0.7.4.min.js") .Include("~/Scripts/bootstrap.min.js") ); The recommendation is that you create a Durandal app in a folder off your project root named App. The App folder in the Starter Kit contains the following subfolders and files: · durandal – This folder contains the actual durandal JavaScript library. · viewmodels – This folder contains all of your application’s view models. · views – This folder contains all of your application’s views. · main.js — This file contains all of the JavaScript startup code for your app including the client-side routing configuration. · main-built.js – This file contains an optimized version of your application. You need to build this file by using the RequireJS optimizer (unfortunately, before you can run the optimizer, you must first install NodeJS). For the purpose of this blog entry, I wanted to start from scratch when building the Movies app, so I deleted all of these files and folders except for the durandal folder which contains the durandal library. Creating the ASP.NET MVC Controller and View A Durandal app is built using a single server-side ASP.NET MVC controller and ASP.NET MVC view. A Durandal app is a Single Page App. When you navigate between pages, you are not navigating to new pages on the server. Instead, you are loading new virtual pages into the one-and-only-one server-side view. For the Movies app, I created the following ASP.NET MVC Home controller: public class HomeController : Controller { public ActionResult Index() { return View(); } } There is nothing special about the Home controller – it is as basic as it gets. Next, I created the following server-side ASP.NET view. This is the one-and-only server-side view used by the Movies app: @{ Layout = null; } <!DOCTYPE html> <html> <head> <title>Index</title> </head> <body> <div id="applicationHost"> Loading app.... </div> @Scripts.Render("~/scripts/vendor") <script type="text/javascript" src="~/App/durandal/amd/require.js" data-main="/App/main"></script> </body> </html> Notice that I set the Layout property for the view to the value null. If you neglect to do this, then the default ASP.NET MVC layout will be applied to the view and you will get the <!DOCTYPE> and opening and closing <html> tags twice. Next, notice that the view contains a DIV element with the Id applicationHost. This marks the area where virtual pages are loaded. When you navigate from page to page in a Durandal app, HTML page fragments are retrieved from the server and stuck in the applicationHost DIV element. Inside the applicationHost element, you can place any content which you want to display when a Durandal app is starting up. For example, you can create a fancy splash screen. I opted for simply displaying the text “Loading app…”: Next, notice the view above includes a call to the Scripts.Render() helper. This helper renders out all of the JavaScript files required by the Durandal library such as jQuery and Knockout. Remember to fix the App_Start\DurandalBundleConfig.cs as described above or Durandal will attempt to load an old version of jQuery and throw a JavaScript exception and stop working. Your application JavaScript code is not included in the scripts rendered by the Scripts.Render helper. Your application code is loaded dynamically by RequireJS with the help of the following SCRIPT element located at the bottom of the view: <script type="text/javascript" src="~/App/durandal/amd/require.js" data-main="/App/main"></script> The data-main attribute on the SCRIPT element causes RequireJS to load your /app/main.js JavaScript file to kick-off your Durandal app. Creating the Durandal Main.js File The Durandal Main.js JavaScript file, located in your App folder, contains all of the code required to configure the behavior of Durandal. Here’s what the Main.js file looks like in the case of the Movies app: require.config({ paths: { 'text': 'durandal/amd/text' } }); define(function (require) { var app = require('durandal/app'), viewLocator = require('durandal/viewLocator'), system = require('durandal/system'), router = require('durandal/plugins/router'); //>>excludeStart("build", true); system.debug(true); //>>excludeEnd("build"); app.start().then(function () { //Replace 'viewmodels' in the moduleId with 'views' to locate the view. //Look for partial views in a 'views' folder in the root. viewLocator.useConvention(); //configure routing router.useConvention(); router.mapNav("movies/show"); router.mapNav("movies/add"); router.mapNav("movies/details/:id"); app.adaptToDevice(); //Show the app by setting the root view model for our application with a transition. app.setRoot('viewmodels/shell', 'entrance'); }); }); There are three important things to notice about the main.js file above. First, notice that it contains a section which enables debugging which looks like this: //>>excludeStart(“build”, true); system.debug(true); //>>excludeEnd(“build”); This code enables debugging for your Durandal app which is very useful when things go wrong. When you call system.debug(true), Durandal writes out debugging information to your browser JavaScript console. For example, you can use the debugging information to diagnose issues with your client-side routes: (The funny looking //> symbols around the system.debug() call are RequireJS optimizer pragmas). The main.js file is also the place where you configure your client-side routes. In the case of the Movies app, the main.js file is used to configure routes for three page: the movies show, add, and details pages. //configure routing router.useConvention(); router.mapNav("movies/show"); router.mapNav("movies/add"); router.mapNav("movies/details/:id");   The route for movie details includes a route parameter named id. Later, we will use the id parameter to lookup and display the details for the right movie. Finally, the main.js file above contains the following line of code: //Show the app by setting the root view model for our application with a transition. app.setRoot('viewmodels/shell', 'entrance'); This line of code causes Durandal to load up a JavaScript file named shell.js and an HTML fragment named shell.html. I’ll discuss the shell in the next section. Creating the Durandal Shell You can think of the Durandal shell as the layout or master page for a Durandal app. The shell is where you put all of the content which you want to remain constant as a user navigates from virtual page to virtual page. For example, the shell is a great place to put your website logo and navigation links. The Durandal shell is composed from two parts: a JavaScript file and an HTML file. Here’s what the HTML file looks like for the Movies app: <h1>Movies App</h1> <div class="container-fluid page-host"> <!--ko compose: { model: router.activeItem, //wiring the router afterCompose: router.afterCompose, //wiring the router transition:'entrance', //use the 'entrance' transition when switching views cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models) }--><!--/ko--> </div> And here is what the JavaScript file looks like: define(function (require) { var router = require('durandal/plugins/router'); return { router: router, activate: function () { return router.activate('movies/show'); } }; }); The JavaScript file contains the view model for the shell. This view model returns the Durandal router so you can access the list of configured routes from your shell. Notice that the JavaScript file includes a function named activate(). This function loads the movies/show page as the first page in the Movies app. If you want to create a different default Durandal page, then pass the name of a different age to the router.activate() method. Creating the Movies Show Page Durandal pages are created out of a view model and a view. The view model contains all of the data and view logic required for the view. The view contains all of the HTML markup for rendering the view model. Let’s start with the movies show page. The movies show page displays a list of movies. The view model for the show page looks like this: define(function (require) { var moviesRepository = require("repositories/moviesRepository"); return { movies: ko.observable(), activate: function() { this.movies(moviesRepository.listMovies()); } }; }); You create a view model by defining a new RequireJS module (see http://requirejs.org). You create a RequireJS module by placing all of your JavaScript code into an anonymous function passed to the RequireJS define() method. A RequireJS module has two parts. You retrieve all of the modules which your module requires at the top of your module. The code above depends on another RequireJS module named repositories/moviesRepository. Next, you return the implementation of your module. The code above returns a JavaScript object which contains a property named movies and a method named activate. The activate() method is a magic method which Durandal calls whenever it activates your view model. Your view model is activated whenever you navigate to a page which uses it. In the code above, the activate() method is used to get the list of movies from the movies repository and assign the list to the view model movies property. The HTML for the movies show page looks like this: <table> <thead> <tr> <th>Title</th><th>Director</th> </tr> </thead> <tbody data-bind="foreach:movies"> <tr> <td data-bind="text:title"></td> <td data-bind="text:director"></td> <td><a data-bind="attr:{href:'#/movies/details/'+id}">Details</a></td> </tr> </tbody> </table> <a href="#/movies/add">Add Movie</a> Notice that this is an HTML fragment. This fragment will be stuffed into the page-host DIV element in the shell.html file which is stuffed, in turn, into the applicationHost DIV element in the server-side MVC view. The HTML markup above contains data-bind attributes used by Knockout to display the list of movies (To learn more about Knockout, visit http://knockoutjs.com). The list of movies from the view model is displayed in an HTML table. Notice that the page includes a link to a page for adding a new movie. The link uses the following URL which starts with a hash: #/movies/add. Because the link starts with a hash, clicking the link does not cause a request back to the server. Instead, you navigate to the movies/add page virtually. Creating the Movies Add Page The movies add page also consists of a view model and view. The add page enables you to add a new movie to the movie database. Here’s the view model for the add page: define(function (require) { var app = require('durandal/app'); var router = require('durandal/plugins/router'); var moviesRepository = require("repositories/moviesRepository"); return { movieToAdd: { title: ko.observable(), director: ko.observable() }, activate: function () { this.movieToAdd.title(""); this.movieToAdd.director(""); this._movieAdded = false; }, canDeactivate: function () { if (this._movieAdded == false) { return app.showMessage('Are you sure you want to leave this page?', 'Navigate', ['Yes', 'No']); } else { return true; } }, addMovie: function () { // Add movie to db moviesRepository.addMovie(ko.toJS(this.movieToAdd)); // flag new movie this._movieAdded = true; // return to list of movies router.navigateTo("#/movies/show"); } }; }); The view model contains one property named movieToAdd which is bound to the add movie form. The view model also has the following three methods: 1. activate() – This method is called by Durandal when you navigate to the add movie page. The activate() method resets the add movie form by clearing out the movie title and director properties. 2. canDeactivate() – This method is called by Durandal when you attempt to navigate away from the add movie page. If you return false then navigation is cancelled. 3. addMovie() – This method executes when the add movie form is submitted. This code adds the new movie to the movie repository. I really like the Durandal canDeactivate() method. In the code above, I use the canDeactivate() method to show a warning to a user if they navigate away from the add movie page – either by clicking the Cancel button or by hitting the browser back button – before submitting the add movie form: The view for the add movie page looks like this: <form data-bind="submit:addMovie"> <fieldset> <legend>Add Movie</legend> <div> <label> Title: <input data-bind="value:movieToAdd.title" required /> </label> </div> <div> <label> Director: <input data-bind="value:movieToAdd.director" required /> </label> </div> <div> <input type="submit" value="Add" /> <a href="#/movies/show">Cancel</a> </div> </fieldset> </form> I am using Knockout to bind the movieToAdd property from the view model to the INPUT elements of the HTML form. Notice that the FORM element includes a data-bind attribute which invokes the addMovie() method from the view model when the HTML form is submitted. Creating the Movies Details Page You navigate to the movies details Page by clicking the Details link which appears next to each movie in the movies show page: The Details links pass the movie ids to the details page: #/movies/details/0 #/movies/details/1 #/movies/details/2 Here’s what the view model for the movies details page looks like: define(function (require) { var router = require('durandal/plugins/router'); var moviesRepository = require("repositories/moviesRepository"); return { movieToShow: { title: ko.observable(), director: ko.observable() }, activate: function (context) { // Grab movie from repository var movie = moviesRepository.getMovie(context.id); // Add to view model this.movieToShow.title(movie.title); this.movieToShow.director(movie.director); } }; }); Notice that the view model activate() method accepts a parameter named context. You can take advantage of the context parameter to retrieve route parameters such as the movie Id. In the code above, the context.id property is used to retrieve the correct movie from the movie repository and the movie is assigned to a property named movieToShow exposed by the view model. The movie details view displays the movieToShow property by taking advantage of Knockout bindings: <div> <h2 data-bind="text:movieToShow.title"></h2> directed by <span data-bind="text:movieToShow.director"></span> </div> Summary The goal of this blog entry was to walkthrough building a simple Single Page App using Durandal and to get a feel for what it is like to use this library. I really like how Durandal stitches together Knockout, Sammy, and RequireJS and establishes patterns for using these libraries to build Single Page Apps. Having a standard pattern which developers on a team can use to build new pages is super valuable. Once you get the hang of it, using Durandal to create new virtual pages is dead simple. Just define a new route, view model, and view and you are done. I also appreciate the fact that Durandal did not attempt to re-invent the wheel and that Durandal leverages existing JavaScript libraries such as Knockout, RequireJS, and Sammy. These existing libraries are powerful libraries and I have already invested a considerable amount of time in learning how to use them. Durandal makes it easier to use these libraries together without losing any of their power. Durandal has some additional interesting features which I have not had a chance to play with yet. For example, you can use the RequireJS optimizer to combine and minify all of a Durandal app’s code. Also, Durandal supports a way to create custom widgets (client-side controls) by composing widgets from a controller and view. You can download the code for the Movies app by clicking the following link (this is a Visual Studio 2012 project): Durandal Movie App

    Read the article

  • grunt server command not found in terminal

    - by user3413185
    In my project directory i installed grunt using the following command npm install grunt...after that i did grunt server in my project directory but it gives me command not found error.. providing my error below.. can you tell me how to fix it.. Raj$ grunt server -bash: grunt: command not found npm install grunt npm install grunt npm WARN package.json [email protected] No description npm WARN package.json [email protected] No repository field. npm WARN package.json [email protected] No README data

    Read the article

  • No method 'get' on backbone model save

    - by user888734
    I'm using backbone for a reasonably complicated form. I have a number of nested models, and have been computing other variables in the parent model like so: // INSIDE PARENT MODEL computedValue: function () { var value = this.get('childModel').get('childModelProperty'); return value; } This seems to work fine for keeping my UI in sync, but as soon as I call .save() on the parent model, I get: Uncaught TypeError: Object #<Object> has no method 'get' It seems that the child model kind of temporarily stops responding. Am I doing something inherently wrong? EDIT: The stack trace is: Uncaught TypeError: Object #<Object> has no method 'get' publish.js:90 Backbone.Model.extend.neutralDivisionComputer publish.js:90 Backbone.Model.extend.setNeutralComputed publish.js:39 Backbone.Events.trigger backbone.js:163 _.extend.change backbone.js:473 _.extend.set backbone.js:314 _.extend.save.options.success backbone.js:385 f.Callbacks.o jquery.min.js:2 f.Callbacks.p.fireWith jquery.min.js:2 w jquery.min.js:4 f.support.ajax.f.ajaxTransport.send.d

    Read the article

  • Getting closure-compiler and Node.js to play nice

    - by bukzor
    Are there any projects that used node.js and closure-compiler (CC for short) together? The official CC recommendation is to compile all code for an application together, but when I compile some simple node.js code which contains a require("./MyLib.js"), that line is put directly into the output, but it doesn't make any sense in that context. I see a few options: Code the entire application as a single file. This solves the problem by avoiding it, but is bad for maintenance. Assume that all files will be concatenated before execution. Again this avoids the problem, but makes it harder to implement a un-compiled debug mode. I'd like to get CC to "understand" the node.js require() function, but that probably can't be done without editing the compiler itself, can it?

    Read the article

  • JSDoc3: How to document a AMD module that returns a function

    - by Jens Simon
    I'm trying to find a way to document AMD modules using JSDoc3. /** * Module description. * * @module path/to/module */ define(['jquery', 'underscore'], function (jQuery, _) { /** * @param {string} foo Foo-Description * @param {object} bar Bar-Description */ return function (foo, bar) { // insert code here }; }); Sadly none of the patterns listed on http://usejsdoc.org/howto-commonjs-modules.html work for me. How can I generate a proper documentation that lists the parameters and return value of the function exported by the module?

    Read the article

  • Marionette js itemview not defined: then on browser refresh it is defined and all works well - race condition?

    - by Robert
    Yeah it's just the initial browser load or two after a cache clear. Subsequent refreshes clear the problem up. I'm thinking the item views just aren't fully constructed in time to be used in the collection views on the first load. But then they are on a refresh? Don't know. There must be something about the code sequence or loading or the load time itself. Not sure. I'm loading via require.js. Have two collections - users and messages. Each renders in its own list view. Each works, just not the first time or two the browser loads. The first time you load after clearing browser cache the console reports, for instance: "Uncaught ReferenceError: MessageItemView is not defined" A simple browser refresh clears it up. Same goes for the user collection. It's collection view says it doesn't know anything about its item view. But a simple browser refresh and all is well. My views (item and collection) are in separate files. Is that the problem? For instance, here is my message collection view in its own file: messagelistview.js var MessageListView = Marionette.CollectionView.extend({ itemView: MessageItemView, el: $("#messages") }); And the message item view is in a separate file: messageview.js var MessageItemView = Marionette.ItemView.extend({ tagName: "div", template: Handlebars.compile( '<div>{{fromUserName}}:</div>' + '<div>{{message}}</div>' + ) }); Then in my main module file, which references each of those files, the collection view is constructed and displayed: main.js //Define a model MessageModel = Backbone.Model.extend(); //Make an instance of MessageItemView - code in separate file, messagelistview.js MessageView = new MessageItemView(); //Define a message collection var MessageCollection = Backbone.Collection.extend({ model: MessageModel }); //Make an instance of MessageCollection var collMessages = new MessageCollection(); //Make an instance of a MessageListView - code in separate file, messagelistview.js var messageListView = new MessageListView({ collection: collMessages }); App.messageListRegion.show(messageListView); Do I just have things sequenced wrong? I'm thinking it's some kind of race condition only because over 3G to an iPad the item views are always undefined. They never seem to get constructed in time. PC on a hard wired connection does see success after a browser refresh or two.

    Read the article

  • require.js - How can I set a version on required modules as part of the URL?

    - by Ovesh
    I am using require.js to require JS modules in my application. I need a way to bust client cache on new JS modules, by way of a different requested URL. i.e., if the file hello/there.js has already been cached on the client, I can change the file name to force the browser to get the new file. In other words, for the module hello/there, I'd like require.js to request the url hello/there___v1234___.js (the file name can look different, it's just an example), according to a version string which is accessible on the client. What is the best way to achieve that?

    Read the article

  • How to delete empty folders from a given directory in windows with a script

    - by Nicola Peluchetti
    I'm using r.js as a build tool but as of today that tools doesn't give me the ability to delete empty folders in the build dir. I've found these two scripts for /f "usebackq" %%d in ("dir /ad/b/s | sort /R") do rd "%%d" for /f "delims=" %%i in ('dir /s /b /ad ^| sort /r') do rd "%%i">NUL looking around the net but i always get %%i was unexpected at this time. or %%d was unexpected at this time. And i wouldn't know how to tell the script where my directory is. My build script is @echo off where /q r.js || ( echo requirejs node package is not installed. You must install node, npm and then run npm install -g requirejs goto :eof ) node r.js -o app.build.js :end I need to tell the script to remove all empty directories which are located inside ../../js

    Read the article

  • Select tool to minimize JavaScript and CSS size

    - by Michael Freidgeim
    There are multiple ways and techniques how to combine and minify JS and CSS files.The good number of links can be found in http://stackoverflow.com/questions/882937/asp-net-script-and-css-compression and in http://www.hanselman.com/blog/TheImportanceAndEaseOfMinifyingYourCSSAndJavaScriptAndOptimizingPNGsForYourBlogOrWebsite.aspx There are 2 major approaches- do it during build or at run-time.In our application there are multiple user-controls, each of them required different JS or CSS files, and they loaded dynamically in the different combinations. We decided that loading all JS or CSS files for each page is not a good idea, but for each page we need to load different set of files.Based on this combining files on the build stage does not looks feasible.After Reviewing  different links I’ve decided that squishit should fit to our needs. http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisherDifferent limitations of using SquishIt.We had some browser specific CSS files, that loaded conditionally depending of browser type(i.e IE and all other browsers). We had to put them in separate bundles,For Resources and AXD files we decide to use HttpModule and HttpHandler created by Mads KristensenTo GZIP html we are using wwWebUtils.GZipEncodePage() http://www.west-wind.com/weblog/posts/2007/Feb/05/More-on-GZip-compression-with-ASPNET-Content Just swap the order of which encoding you apply to start by asking for deflate support and then GZip afterwards.Additional tips about SquishIt.Use CDN: https://groups.google.com/group/squishit/browse_thread/thread/99f3b61444da9ad1Support intellisense and generate bundle in codebehind http://tech.kipusoep.nl/2010/07/23/umbraco-45-visual-studio-2010-dotless-jquery-vsdoc-squishit-masterpages/Links about other Libraries that were consideredA few links from http://stackoverflow.com/questions/5288656/which-one-has-better-minification-between-squishit-and-combres2.Net 4.5 will have out-of-the-box tools for JS/CSS combining.http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx . It suggests default bundle of subfolder, but also seems supporting similar to squishit explicitly specified files.http://www.codeproject.com/KB/aspnet/combres2.aspx  config XML file can specify expiry etchttps://github.com/andrewdavey/cassette http://stackoverflow.com/questions/7026029/alternatives-to-cassetteDynamically loaded JS files requireJS http://requirejs.org/docs/start.html  http://www.west-wind.com/weblog/posts/2008/Jul/07/Inclusion-of-JavaScript-FilesPack and minimize your JavaScript code sizeYUI Compressor (from Yahoo)JSMin (by Douglas Crockford)ShrinkSafe (from Dojo library)Packer (by Dean Edwards)RadScriptManager  & RadStyleSheetManager -fromTeleric(not free)Tools to optimize performance:PageSpeed tools family http://code.google.com/intl/ru/speed/page-speed/download.htmlv

    Read the article

  • Where does jQuery fit-in with frameworks like JavaScriptMVC, BackboneJS, SproutCore and Knockout?

    - by Prisoner ZERO
    I have been happily using JQuery for the last 2 years and have been quite sucessful creating some really cool functionality with it...so I am very comfortable with it. I also beleive the future of the web will continue on the current client-side path. However... The next challenge seems to be coming in the form of various controller frameworks: KnockoutJS, BackboneJS, SproutCore, JavaScriptMVC (the list goes on). Additonally, there are some great AMD Loader tools for use like RequireJS or LabJS etc. However, jQuery now has define and then capabilities baked-in. It's getting harder-and-harder to keep track of it all... And now, my task seems to be to evaluate/decide-on a strategic-direction for using some form of either an MVC or MVVM framework client-side...but I have so many questions. Where does JQuery fit-in with the various controller-frameworks mentioned above? Is JQuery used alongside each or do some of them have their own 'JQuery-styled version' baked-in? Are tools like RequireJS still needed if you implement one of the various controller-frameworks mentioned above? Does the define and then capabilities baked-into JQuery now supercede the AMD Loader mentioned above? Which one seems most modular? (see notes below) NOTES: One thing I don't want in any future-framework is the requirement of having to take-in vast amounts of functionality that I don't use. Meaning, I would rather use a framework that is truly modular. For example, to use jQuery UI you have to take-in a lot other core libraries that you might not actually use. I will be experimenting with each one, but some REAL feedback would be great. I've seen some 'similar' questions, but none have really answered the above skew. Thanks in advance!

    Read the article

  • Run Grunt task in Visual Studio Release Build with a bat file

    - by Aligned
    Originally posted on: http://geekswithblogs.net/Aligned/archive/2014/08/19/run-grunt-task-in-visual-studio-release-build-with-a.aspx 1. Add a BeforeBuild in your csproj file. Edit the xml with a text editor. <Target Name="BeforeBuild"> <Exec Condition="'$(Configuration)' == 'Release'" Command="script-optimize.bat" /> </Target> 2. Create the script-optimize.batREM "%~dp0" maps to the directory where this file exists cd %~dp0\..\YourProjectFolder call npm uninstall grunt call npm uninstall grunt call npm install --cache-min 604800 -g grunt-cli call npm install --cache-min 604800 grunt typescript requirejs copy less:compile less:mincompileThis grunt command will compile typescript, run the requireJs optimizer, complie and minimize less.3. Make it use the minified code when the Web.config compilation debug is set to false <!-- These CustomCollectFiles actions are used so that the Scripts-Release folder/files are included        when publishing even though they are not project references -->  <Target Name="CustomCollectFiles">    <ItemGroup>      <_CustomFiles Include="Scripts-Release\**\*" />  </ItemGroup>  </Target> That should be all you need to get a Grunt task to minify and combine JS (plus other tasks) in Visual Studio Release build with debug = false. This is a great video of Steve Sanderson talking about SPAs, npm, Knockout, Grunt, Gulp, ect. I highly recommend it.

    Read the article

  • Namespaces are obsolete

    - by Bertrand Le Roy
    To those of us who have been around for a while, namespaces have been part of the landscape. One could even say that they have been defining the large-scale features of the landscape in question. However, something happened fairly recently that I think makes this venerable structure obsolete. Before I explain this development and why it’s a superior concept to namespaces, let me recapitulate what namespaces are and why they’ve been so good to us over the years… Namespaces are used for a few different things: Scope: a namespace delimits the portion of code where a name (for a class, sub-namespace, etc.) has the specified meaning. Namespaces are usually the highest-level scoping structures in a software package. Collision prevention: name collisions are a universal problem. Some systems, such as jQuery, wave it away, but the problem remains. Namespaces provide a reasonable approach to global uniqueness (and in some implementations such as XML, enforce it). In .NET, there are ways to relocate a namespace to avoid those rare collision cases. Hierarchy: programmers like neat little boxes, and especially boxes within boxes within boxes. For some reason. Regular human beings on the other hand, tend to think linearly, which is why the Windows explorer for example has tried in a few different ways to flatten the file system hierarchy for the user. 1 is clearly useful because we need to protect our code from bleeding effects from the rest of the application (and vice versa). A language with only global constructs may be what some of us started programming on, but it’s not desirable in any way today. 2 may not be always reasonably worth the trouble (jQuery is doing fine with its global plug-in namespace), but we still need it in many cases. One should note however that globally unique names are not the only possible implementation. In fact, they are a rather extreme solution. What we really care about is collision prevention within our application. What happens outside is irrelevant. 3 is, more than anything, an aesthetical choice. A common convention has been to encode the whole pedigree of the code into the namespace. Come to think about it, we never think we need to import “Microsoft.SqlServer.Management.Smo.Agent” and that would be very hard to remember. What we want to do is bring nHibernate into our app. And this is precisely what you’ll do with modern package managers and module loaders. I want to take the specific example of RequireJS, which is commonly used with Node. Here is how you import a module with RequireJS: var http = require("http"); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } This is of course importing a HTTP stack module into the code. There is no noise here. Let’s break this down. Scope (1) is provided by the one scoping mechanism in JavaScript: the closure surrounding the module’s code. Whatever scoping mechanism is provided by the language would be fine here. Collision prevention (2) is very elegantly handled. Whereas relocating is an afterthought, and an exceptional measure with namespaces, it is here on the frontline. You always relocate, using an extremely familiar pattern: variable assignment. We are very much used to managing our local variable names and any possible collision will get solved very easily by picking a different name. Wait a minute, I hear some of you say. This is only taking care of collisions on the client-side, on the left of that assignment. What if I have two libraries with the name “http”? Well, You can better qualify the path to the module, which is what the require parameter really is. As for hierarchical organization, you don’t really want that, do you? RequireJS’ module pattern does elegantly cover the bases that namespaces used to cover, but it also promotes additional good practices. First, it promotes usage of self-contained, single responsibility units of code through the closure-based, stricter scoping mechanism. Namespaces are somewhat more porous, as using/import statements can be used bi-directionally, which leads us to my second point… Sane dependency graphs are easier to achieve and sustain with such a structure. With namespaces, it is easy to construct dependency cycles (that’s bad, mmkay?). With this pattern, the equivalent would be to build mega-components, which are an easier problem to spot than a decay into inter-dependent namespaces, for which you need specialized tools. I really like this pattern very much, and I would like to see more environments implement it. One could argue that dependency injection has some commonalities with this for example. What do you think? This is the half-baked result of some morning shower reflections, and I’d love to read your thoughts about it. What am I missing?

    Read the article

1 2  | Next Page >