将属性添加到使用Knockout JS映射插件创建的视图模型(Adding properties to the view model created by using the Knockout JS

将属性添加到使用Knockout JS映射插件创建的视图模型(Adding properties to the view model created by using the Knockout JS mapping plugin)

我正在通过Knockoutjs网站上的地图插件示例工作。

这是示例数据。

Knockout JS Mapping插件

var data = { name: 'Scott', children: [ { id : 1, name : 'Alice' } ] }

该示例显示如何覆盖其中一个子项的映射，但如何更改基础对象的映射。

例如，如果我想为Scott添加一个“FavouriteChild”属性，我将如何去解决它？

我假设我需要在基础映射上使用create函数，但是我找不到任何地方的语法示例。

var myChildModel = function(data) { ko.mapping.fromJS(data, {}, this); this.nameLength = ko.computed(function() { return this.name().length; }, this); } var mapping = { 'children': { create: function(options) { return new myChildModel(options.data); } } } var viewModel = ko.mapping.fromJS(data, mapping);

编辑：从接受的答案下面我发现这个工作

<span data-bind='text: AdditionalProperty'>

淘汰赛代码

var mapping = { create: function (options) { //customize at the root level. var innerModel = ko.mapping.fromJS(options.data); innerModel.AdditionalProperty = 'Hello World'; return innerModel; } } var viewModel = ko.mapping.fromJS(data, mapping); //use this as our model bindings ko.applyBindings(viewModel);

I am working through the mapping plugin example on the Knockoutjs website.

This is the example data.

Knockout JS Mapping Plugin

var data = { name: 'Scott', children: [ { id : 1, name : 'Alice' } ] }

The example shows how to override the mapping for one of the children but how do I alter the mapping for the base object.

If for example I wanted to add a "FavouriteChild" property to Scott how would I go about it?

I assume I need to use the create function on the base mapping but I cannot find an example of the syntax anywhere.

var myChildModel = function(data) { ko.mapping.fromJS(data, {}, this); this.nameLength = ko.computed(function() { return this.name().length; }, this); } var mapping = { 'children': { create: function(options) { return new myChildModel(options.data); } } } var viewModel = ko.mapping.fromJS(data, mapping);

EDIT : From the accepted answer below I found this to work

<span data-bind='text: AdditionalProperty'>

The knockout code

var mapping = { create: function (options) { //customize at the root level. var innerModel = ko.mapping.fromJS(options.data); innerModel.AdditionalProperty = 'Hello World'; return innerModel; } } var viewModel = ko.mapping.fromJS(data, mapping); //use this as our model bindings ko.applyBindings(viewModel);

最满意答案

您需要在映射对象本身上使用create方法，如：

var mapping = { //customize at the root level. create: function(options) { //first map the vm like normal var vm = ko.mapping.fromJS(options.data); //now manipulate the returned vm in any way that you like vm.someProperty = "test"; vm.someComputed = ko.computed(function() { return vm.first() + " " + vm.last(); }); //return our vm that has been mapped and tweaked return vm; } };

You need to use a create method on the mapping object itself like:

var mapping = { //customize at the root level. create: function(options) { //first map the vm like normal var vm = ko.mapping.fromJS(options.data); //now manipulate the returned vm in any way that you like vm.someProperty = "test"; vm.someComputed = ko.computed(function() { return vm.first() + " " + vm.last(); }); //return our vm that has been mapped and tweaked return vm; } };