Question

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

错误：组件＆＃39;相册详细信息＆＃39;：未知模板值：[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"
            }
        ]
    }
}

我使用自耕农来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);
});

knockoutjs抛出＆＃34;未知模板值＆＃34;何时使用knockout.mapping

1 个答案: