6

我正在使用 requireJS 创建一个 MVC3 应用程序。在我看来，我需要将模型对象转换为淘汰视图模型对象。所以我需要使用 knockout 和 knockout.mapping 库。

我的应用程序是按以下方式设计的，

1）。所有脚本文件都分类到文件夹中

  • Scripts/app/home/ - 包含 Home 控制器中视图的脚本。
  • Scripts/lib/ - 包含 jQuery、knockout、knockout.mapping、requirejs 等脚本

2）。在“_Layout.cshtml”中，我像这样引用“require.js”。

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

3）。为了配置 require.js 设置，我使用了一个名为“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 文件，它位于“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）。这是我在“主页”控制器中的“索引”操作方法

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

@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 的脚本错误。

加载资源失败：服务器响应状态为 404（未找到） - http:///Scripts/knockout.js

但是，如果我删除“index.js”文件中“komapping”的依赖关系，它会正确加载，但是我不能使用映射功能。

我查看了这些链接，但找不到解决方案， Knockout.js 映射插件与 require.js和 https://github.com/SteveSanderson/knockout.mapping/issues/57

非常感谢您的帮助和建议。谢谢！

4

1 回答 1

19

我遇到过同样的问题。问题是knockout.mapping 定义了一个knockout 依赖，所以你需要在加载脚本的时候满足这个。

这是您应该如何加载映射内容的方法

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 调用，如下所示

requirejs(['jquery', 'knockout', 'komapping'], function($, ko, komapping){
    ko.mapping = komapping;
    //Do other stuff here
});
于 2013-07-26T03:53:58.713 回答