无法使用 json 数据剔除映射在视图模型中映射函数

Question

我的视图模型是这样的：

var viewModel = function(){
var self = this;
self.title = ko.observable('Hello World');
self.rows = ko.observableArray();

self.on_click = function(){
    alert('Hello World');
    var data = [
        {
            id : 1,
            x : 1,
            y : 2,
            z : 3,
        },
        {
            id : 2,
            x : 4,
            y : 5,
            z : 6,
        },
        {
            id : 3,
            x : 7,
            y : 8,
            z : 9,
        }
    ];
    self.rows(ko.unwrap(ko.mapping.fromJS(data, viewModelRow)));
    alert(self.rows());

};
};

var viewModelRow = function(){
    var self = this;
    self.id = ko.observable();
    self.x = ko.observable();
    self.y = ko.observable();
    self.z = ko.observable();
    self.mthd = function(){
        alert('Just Clicked');
    };
};
vm = new viewModel();
ko.applyBindings(vm);

我的html是这样的：

<body>
<h1 data-bind="text:title"></h1>
<div data-bind="foreach: rows">
    <table>
        <tr>
        <td data-bind="text : id"></td>
        <td data-bind="text: x"></td>
        <td data-bind="text: y"></td>
        <td data-bind="text: z"></td>
            <td><button type="button" data-bind="click: mthd">btn</button></td>
        </tr>
    </table>
</div>
<button type="button" data-bind="click: on_click">button</button>
</body>

当使用 viewModelRow 视图模型上的数据执行映射时，它会抛出错误

ReferenceError: mthd is not defined

我想要所有 json 数据与 viewModelRow 的映射以及名为 mthd 的方法在 viewModelRow 中定义。请帮忙。 JSFIDDLE LINK: http://jsfiddle.net/enabqm3d/5/

Answer 1

您使用地图插件的方式有误。 fromJS 函数接受三个参数：

fromJS(data, mappingDefinition, mappingTarget);

mappingDefinition 定义映射期间应执行的规则，例如，从数据创建某些对象，如下所示：

var ViewModel = function(){
    var self = this;

    self.title = ko.observable('Hello World');
    self.rows = ko.observableArray();
    self.init = function(){
        var data = {
            rows: [
                {id : 1, x : 1, y : 2, z : 3,},
                {id : 2, x : 4, y : 5, z : 6,},
                {id : 3, x : 7, y : 8, z : 9,}
            ]
        };

        ko.mapping.fromJS(data, {
            rows: {
                create: function (options) {
                    return new ViewModelRow(options.data);
                }
            }
        }, self);
    };
};

var ViewModelRow = function(data){
    var self = this;

    // think whether these properties really need to be observable
    self.id = ko.observable(data.id);
    self.x = ko.observable(data.x);
    self.y = ko.observable(data.y);
    self.z = ko.observable(data.z);
    self.mthd = function(){
        alert('Just clicked ' + self.id() );
    };
};

var vm = new ViewModel();
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>

<h1 data-bind="text:title"></h1>

<div data-bind="foreach: rows">
  <table>
    <tr>
      <td data-bind="text: id"></td>
      <td data-bind="text: x"></td>
      <td data-bind="text: y"></td>
      <td data-bind="text: z"></td>
      <td><button type="button" data-bind="click: mthd">btn</button></td>
    </tr>
  </table>
</div>

<button type="button" data-bind="click: init">init viewmodel</button>

通读the documentation，读起来还不算多。

Answer 2

由于场景看起来很简单，您可以使用 .arrayMap 映射到具有 observables

的函数来实现它

viewModel:

var viewModelRow = function (param) {
    var self = this;
    self.id = ko.observable(param.id);
    self.x = ko.observable(param.x);
    self.y = ko.observable(param.y);
    self.z = ko.observable(param.z);
    self.mthd = function () {
        alert('im clicked')
    };
};

var viewModel = function () {
    var self = this;
    self.title = ko.observable('Hello World');
    self.rows = ko.observableArray();
    self.on_click = function () {
        var converted = ko.utils.arrayMap(data, function (item) {
            return new viewModelRow(item); // key part here
        })
        self.rows(converted); // assigning after converting everything into observables
    };
};
ko.applyBindings(new viewModel());

工作 fiddle here

无法使用 json 数据剔除映射在视图模型中映射函数

Cannot map function in view model with json data knockout mapping

knockout-mapping-plugin

knockout.js