json - 使用 knockout.mapping 时，knockoutjs 抛出 "Unknown template value"

Question

我正在尝试使用 Knockout.mapping 来更轻松地绑定(bind) JSON 对象。我使用 requirejs 将库加载到我的代码中，但是每当我这样做时，我都会收到此错误:

Error: Component 'album-details': Unknown template value: [object Object]

这是组件的内容:

define(['knockout', 'knockout-mapping', 'text!./album-details.html'], function (ko, templateMarkup) {
    function AlbumDetails(params) {

        var self = this;
        self.album = {};

        $.getJSON('http://localhost:62755/api/album/' + self.id, function (r) {
            ko.mapping.fromJS(r, self.album);
        });        
  }

  // This runs when the component is torn down. Put here any logic necessary to clean up,
  // for example cancelling setTimeouts or disposing Knockout subscriptions/computeds.
  AlbumDetails.prototype.dispose = function() { };

  return { viewModel: AlbumDetails, template: templateMarkup };

});

这是我的 require.config.js

// require.js looks for the following global when initializing
var require = {
    baseUrl: ".",
    paths: {
        "bootstrap":            "bower_modules/components-bootstrap/js/bootstrap.min",
        "crossroads":           "bower_modules/crossroads/dist/crossroads.min",
        "hasher":               "bower_modules/hasher/dist/js/hasher.min",
        "jquery":               "bower_modules/jquery/dist/jquery",
        "knockout":             "bower_modules/knockout/dist/knockout",
        "knockout-projections": "bower_modules/knockout-projections/dist/knockout-projections",
        "knockout-mapping":     "bower_modules/knockout-mapping/knockout.mapping",
        "signals":              "bower_modules/js-signals/dist/signals.min",
        "text":                 "bower_modules/requirejs-text/text"
    },
    shim: {
        "bootstrap": { deps: ["jquery"] },
        "knockout-mapping": {deps: ["knockout"] }
    }
};

这是一个示例 JSON 响应:

{
    "$id" : "1",
    "id" : 14,
    "name" : "Bound to pretend",
    "artist" : {
        "$id" : "2",
        "id" : 12,
        "name" : "Velvet Veins",
        "musicBrainzId" : "f7a48e35-7891-4277-bf19-a1ebeeffea33"
    },
    "releaseDate" : "2014-01-01T00:00:00Z",
    "lastFetchDate" : "2015-04-27T13:31:41Z",
    "musicBrainzReleaseId" : "ea25f9f1-1f26-473d-b084-cf961ef126cf",
    "tracks" : {
        "$id" : "3",
        "$values" : [{
                "$id" : "4",
                "id" : 173,
                "position" : 1,
                "name" : "Boud to pretend"
            }, {
                "$id" : "5",
                "id" : 174,
                "position" : 2,
                "name" : "Arizona ghost"
            }, {
                "$id" : "6",
                "id" : 175,
                "position" : 3,
                "name" : "Sweet heat"
            }, {
                "$id" : "7",
                "id" : 176,
                "position" : 4,
                "name" : "Opal"
            }, {
                "$id" : "8",
                "id" : 177,
                "position" : 5,
                "name" : "Nation sack"
            }, {
                "$id" : "9",
                "id" : 178,
                "position" : 6,
                "name" : "Reptiles of the shore"
            }
        ]
    }
}

我已经使用 yeoman 进行 scalfold 和 bower 来安装库。我不确定如何解决此问题，因为错误描述了 [object Object]，我不太容易理解错误的原因。

从网络跟踪中，我可以看到浏览器检索到了 knockout.mapping.js，但对 API 的 ajax 请求不是。

我该如何解决这个问题？我的代码有什么明显的错误吗？

Answer 1

您没有在模块声明中正确包含映射插件，因为您缺少映射插件的参数。
所以它在 templateMarkup 中传递映射插件本身参数，当 KO 在 template: templateMarkup 中找到它时会报错。 .

要解决此问题，您需要在 templateMarkup 之前添加一个参数。它将保存映射插件

define(['knockout', 'knockout-mapping', 'text!./album-details.html'], 
    function (ko, mapping, templateMarkup)

因为您使用的是 RequireJS，所以映射插件在 ko.mapping 上不可用。属性，但您需要使用第二个参数 mapping访问其功能。

因此，您还需要将映射到的代码更改为:

$.getJSON('http://localhost:62755/api/album/' + self.id, function (r) {
    mapping.fromJS(r, self.album);
});