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

Question

我正在尝试使用 Knockout.mapping 来更轻松地绑定 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 to scalfold 和 bower 安装库。我不确定如何解决此问题，因为错误描述了 [object Object]，我不太容易理解错误的原因。

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

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

Answer 1

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

中找到它时，KO 会抱怨

要解决此问题，您需要在 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);
});

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

knockoutjs throws "Unknown template value" when using knockout.mapping

json

knockout-mapping-plugin

knockout.js