将属性添加到使用Knockout JS映射插件创建的视图模型

Question

我正在通过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);

Answer 1

您需要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;
  }
};

Answer 2

以下是基于RP Niemeyer解决方案的答案的延续

这里的答案基于上面的解决方案和他的博客 - 谢谢你!我想我应该添加一些细节,因为它在数组不是第一级对象时解决.

 var data = {
person: {
       children: [{ id: 1, firstName: 'Scot', lastName: 'Weise'}]
    }
};

var mapping = {
    'children': {
        create: function(options) {
            return (new (function() {
                // setup the computed binding for some reason I had
                //  to use ko.dependentObservable instead of ko.computed
                // or errors showed up.
                this.fullName = ko.dependentObservable(function() {
                    return this.firstName() + ' ' + this.lastName();
                    }, this);
                    ko.mapping.fromJS(options.data, { }, this);
                })(/* call the ctor here */));
            }
        }
    };

    // Create view model and map the data object to the model.
    var viewModel = ko.mapping.fromJS(data, {});

    // update the viewModel with the mapping object that contains 
    // some a computed property(s)
    viewModel.person = ko.mapping.fromJS(viewModel.person, mapping);
    ko.applyBindings(viewModel);

请注意,此人是第一级对象,子级是该人的子属性.行viewModel.person = ko.mapping.fromJS(viewModel.person,mapping)起初并不是我的直觉.

这里有一点点变化

person对象是在最初从服务器json数据创建之后添加或更新的observable.

var viewModel = {};
$(document).ready(function () {
    var person = getPerson();

    // selected person is added to the viewModel
    viewModel.selectedPerson = ko.observable(person);
    ko.applyBindings(viewModel);
});

function getPerson() { 
// you would probably pass this into the function as a parameter. 
var person =
    {
        name: 'jim',
        children: [{ id: 1, firstName: 'jane', lastName: 'bob'}]
    };

    var mapping = {
        'children': {
            create: function (options) {
                return (new (function () {
                    // setup the computed binding
                    this.fullName = ko.dependentObservable(function () {
                    return this.firstName() + ' ' + this.lastName();
                    }, this);
                    ko.mapping.fromJS(options.data, {}, this);
                })(/* call the ctor here */));
            }
        }
    };

    var result = ko.mapping.fromJS(person, mapping);
    return result;
}

html中的一些绑定代码

最终,你需要在某些方面使用它,如下所示:

<div data-bind="foreach:viewModel.selectedPerson().children">
    <span data-bind="text:fullName"></span>
</div>

谢谢您帮忙!没有你的博客文章,我无法做到这一点.