装载＆QUOT; knockout.mapping＆QUOT;插件使用require.js [英] Loading "knockout.mapping" plugin using require.js

问题描述

我创建一个MVC3应用程序，与requireJS。在我的意见，我需要Model对象转换为淘汰赛视图模型对象。所以，我需要用基因敲除和knockout.mapping库。

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

我的应用程序被设计以下面的方式，

My application is designed in the following way,

1）。所有脚本文件分为文件夹

1). All the script files are categorized into folders

• 脚本/应用/主页/ - 包含了Home控制器的意见脚本


• 脚本/ lib中/ - 包含像jQuery，淘汰赛，knockout.mapping，requirejs等
脚本

2）。在_Layout.cshtml我引用require.js像这样。

2). In the "_Layout.cshtml" I am referencing "require.js" like this.

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

3）。要配置我使用所谓的common.js不同的脚本文件require.js设置（脚本/ lib中/ common.js）

3). To configure the require.js settings I am using a different 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）。这是我的index.js文件，该文件是脚本/应用/主页/

4). This is my index.js file which is 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）。这是我的指数的操作方法，在家控制器

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）。最后，这是我的索引视图

6). Finally this is my "Index" view

@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>

我现在面临的问题是加载index.js文件时，我得到一个脚本错误的knockout.js无法加载。

The problem which I am facing is when loading the index.js file, I get a script error that the knockout.js cannot be loaded.

无法加载资源：服务器与404（未找到）状态回应 - HTTP：///Scripts/knockout.js

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

但是，如果我删除index.js内部komapping的依赖文件它正确加载，但我不能使用映射功能。

But if I remove the dependency of "komapping" inside the "index.js" file it loads correctly, but then I cannot use the mapping functionality.

我看看这些链接里面，也没有找到一个解决方案，
<一href=\"http://stackoverflow.com/questions/11197696/knockout-js-mapping-plugin-with-require-js\">Knockout.js映射插件与require.js 并<一href=\"https://github.com/SteveSanderson/knockout.mapping/issues/57\">https://github.com/SteveSanderson/knockout.mapping/issues/57

您的帮助，建议得多AP preciated。谢谢！

I had a look inside these links, but couldn't find a solution, Knockout.js mapping plugin with require.js and https://github.com/SteveSanderson/knockout.mapping/issues/57

Your help, suggestions are much appreciated. Thanks!

推荐答案

我有同样的问题。问题是，knockout.mapping定义了一个淘汰赛的依赖，所以你需要满足这一个，当你加载脚本。

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

下面是你应该如何加载映射的东西。

Here is how you should load 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'
        }
    }
});

然后在我的情况下，我使用index.js文件与requirejs呼叫像下面的

Then in my case, I use an index.js file with a requirejs call like the following

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

这篇关于装载＆QUOT; knockout.mapping＆QUOT;插件使用require.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！