javascript - 在映射过程中对每个自动生成的可观察值进行后处理

Question

问题:

我有以下 View 模型。很简单，不是吗？在现实世界中，模型会更加复杂，具有很多层次结构。我想要实现的目标是对每个自动生成的可观察值进行一些后处理，并为其提供“扩展”功能。使用 Knockout 和映射插件可以实现这一点吗？

var model = {
  RiskID: 1,
  RiskName: "Risk of flood"
};

var mappingOptions = {
  /* How to call the 'extend' function for each auto-generated observable during mapping automatically? */
  create: function(options) {
  	return new RiskViewModel(options.data);
  }
};

function RiskViewModel(model) {
  var self = ko.mapping.fromJS(model, {}, this);

  /* How to automate next two lines? */
  self.RiskID.extend({ propertyName: 'RiskID' });
  self.RiskName.extend({ propertyName: 'RiskName' });
}

ko.extenders.propertyName = function(target, propertyName) {
  target.propertyName = propertyName;
  return target;
}

var viewModel = ko.mapping.fromJS(model, mappingOptions);
ko.applyBindings(viewModel);

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

<input type='text' data-bind='value: RiskID, attr: { name: RiskID.propertyName }' />
<br/>
<input type='text' data-bind='value: RiskName, attr: { name: RiskName.propertyName }' /> 

上面代码中的“propertyName”扩展器只是一个示例。这个想法是迭代所有可观察的结果并对其进行后处理。如果有人可以建议如何实现这一目标，我将不胜感激。

已于 2018 年 3 月 20 日编辑

我终于想到了这一点。

var model = {
    RiskID: 1,
    RiskName: "Risk of flood",
    Category: {
        CategoryID: 2,
        CategoryName: "Production",
        Users: [{
                UserID: 88,
                Name: null
            },
            {
                UserID: 89,
                Name: 'Doe'
            }
        ]
    },
    Losses: [{
        Date: '2017/01/01',
        Value: 1000,
        Observations: [{
            X: 0,
            Y: 1
        }, {
            X: 1,
            Y: 99
        }],
        Data: {
            X: 1,
            Y: [0, 1]
        }
    }, {
        Date: '2017/02/01',
        Value: 2000,
        Observations: [{
            X: 0,
            Y: 1
        }, {
            X: 1,
            Y: 99
        }],
        Data: {
            X: 2,
            Y: [-1, 2]
        }
    }]
};

ko.modelState = function(viewModel, baseName) {
    if (viewModel === null || typeof(viewModel) === "undefined") {
        return;
    }
    if (ko.isObservable(viewModel)) {
        viewModel.extend({
            propertyName: baseName
        });
    } else if ($.isArray(viewModel)) {
        $.each(viewModel, function(i, item) {
            ko.modelState(item, typeof(baseName) === "undefined" ? key : baseName + "[" + i + "]");
        });
    } else {
        var keys = Object.keys(viewModel);
        $.each(keys, function(i, key) {
            if ($.isArray(viewModel[key])) {
                $.each(viewModel[key], function(i, item) {
                    ko.modelState(item, typeof(baseName) === "undefined" ? key : baseName + "." + key + "]");
                });
            } else if (typeof(viewModel[key]) === "object") {
                ko.modelState(viewModel[key], typeof(baseName) === "undefined" ? key : baseName + "." + key + "");
            } else if (ko.isObservable(viewModel[key]) && !ko.isComputed(viewModel[key])) {
                ko.modelState(viewModel[key](), typeof(baseName) === "undefined" ? key : baseName + "." + key);
                viewModel[key].extend({
                    propertyName: typeof(baseName) === "undefined" ? key : baseName + "." + key
                });
            }
        });
    }
};

ko.extenders.propertyName = function(target, propertyName) {
    target.propertyName = propertyName;
    return target;
};

var viewModel = ko.mapping.fromJS(model);
ko.modelState(viewModel);
ko.applyBindings(viewModel);

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

<span data-bind='text: RiskID.propertyName'></span>: '<span data-bind='text: RiskID'></span>'
<br/>
<span data-bind='text: RiskName.propertyName'></span>: '<span data-bind='text: RiskName'></span>'
<br/>
<!-- ko with: Category -->
<span data-bind='text: CategoryID.propertyName'></span>: '<span data-bind='text: CategoryID'></span>'
<br/>
<span data-bind='text: CategoryName.propertyName'></span>: '<span data-bind='text: CategoryName'></span>'
<br/>
<!-- ko foreach: Users -->
<span data-bind='text: UserID.propertyName'></span>: '<span data-bind='text: UserID'></span>'
<br/>
<span data-bind='text: Name.propertyName'></span>: '<span data-bind='text: Name'></span>'
<br/>
<!-- /ko -->
<!-- /ko -->
<br/>
<div data-bind='foreach: Losses'>
    <div>
        <span data-bind='text: Date.propertyName'></span>: '<span data-bind='text: Date'></span>'</div>
    <div>
        <span data-bind='text: Value.propertyName'></span>: '<span data-bind='text: Value'></span>'
    </div>
    <div>
        <!-- ko foreach: Observations -->
        <div>
            <span data-bind='text: X.propertyName'></span>: <span data-bind='text: X'></span>
        </div>
        <!-- /ko -->
        <!-- ko with: Data -->
        <div>
            <span data-bind='text: X.propertyName'></span>: <span data-bind='text: X'></span>
        </div>
        <div>
            <span data-bind='text: Y.propertyName'></span>:
            <!-- ko foreach: Y -->
            <span data-bind='text: $data'></span>,
            <!-- /ko -->
        </div>
        <!-- /ko -->
    </div>
</div>

<pre id='raw'>
</pre>

Answer 1

您可以使用 Object.keys() 检索模型中所有键的数组。您可以使用 Array.prototype.forEach 对其进行循环。

例如:

Object.keys(model).forEach(k => {
  self[k].extend({ propertyName: k })
});

我不确定它是否能与mapping插件很好地配合使用。为什么首先要向您的可观察对象添加 propertyName ？