Downloading the knockout.mapping plugin using require.js

Question

I am creating an MVC3 application with requireJS. In my views, I need to convert the Model object to a viewmodel with a knockout. So I need to use the knockout and knockout.mapping libraries.

My application is designed as follows:

1). All script files are classified into folders

• Scripts / app / home / - contains scripts for representations in the home controller.
• Scripts / lib / - contains scripts such as jQuery, knockout, knockout.mapping, requirejs, etc.

2). In "_Layout.cshtml" I refer to "require.js" as follows.

<script src="@Url.Content("~/Scripts/lib/require.js")" type="text/javascript"></script> 

3). To configure require.js options, I use another script file called common.js (Scripts / lib / common.js)

 require.config( { baseUrl: "/Scripts/", paths:{ jquery: "lib/jquery-2.0.3", ko: "lib/knockout-2.3.0", komapping: "lib/knockout.mapping" } }); 

4). This is my index.js file, which is located in 'Scripts / app / home / "

 define(['ko', 'komapping'], function (ko, komapping) { var person = function () { var self = this; self.getPersonViewModel = function (data) { return ko.mapping.fromJS(data); ; }; }; return { Person: person }; 

});

5). This is my Index action method in the Home controller.

 public ActionResult Index() { var person = new Person { Id = 1, Name = "John", Addresses = new List<Address>(new[]{new Address{Country = "Country 1", City = "City 1"}}) }; return View(person); } 

6). Finally, this is my view of "Index"

 @model MMS.Web.Models.Person <script type="text/javascript"> require(["/Scripts/common/common.js"], function () { require(["app/home/index"], function (indexJS) { var person = new indexJS.Person(); var vm = person.getPersonViewModel(@Html.Raw(Json.Encode(Model))); }); }); </script> 

The problem I encountered is loading the index.js file, I get a script error that cannot be loaded into knockout.js.

Failed to load the resource: the server responded with a status of 404 (not found) - http: ///Scripts/knockout.js

But if I remove the "komapping" dependency inside the "index.js" file, it will load correctly, but then I cannot use the display functionality.

I looked through these links, but could not find a solution, Knockout.js mapping plugin with require.js and https://github.com/SteveSanderson/knockout.mapping/issues/57

Your help, suggestions are greatly appreciated. Thank you

Answer 1

I had the same problem. The problem is that knockout.mapping defines a knockout dependency, so you need to satisfy this when loading the script.

Here's how you should upload your mapping stuff

 require.config( { baseUrl: "/Scripts/", paths:{ jquery: "lib/jquery-2.0.3", knockout: "lib/knockout-2.3.0", komapping: "lib/knockout.mapping" }, shim: { komapping: { deps: ['knockout'], exports: 'komapping' } } }); 

Then in my case I use the index.js file with the requirejs request as follows

 requirejs(['jquery', 'knockout', 'komapping'], function($, ko, komapping){ ko.mapping = komapping; //Do other stuff here });