在映射期间对每个自动生成的 observable 进行后处理

Posted 2023-03-27

【中文标题】在映射期间对每个自动生成的 observable 进行后处理

【英文标题】：Post-processing for each auto generated observable during mapping

【发布时间】：2017-10-27 01:01:03

【问题描述】：

问题：

我有以下视图模型。很简单，不是吗？在现实世界中，模型将更加复杂，具有许多层次结构。我想要实现的是对每个自动生成的 observable 进行一些后处理，并为其提供“扩展”功能。使用 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>

【参考方案1】：

您可以使用Object.keys() 检索模型中所有键的数组。您可以使用Array.prototype.forEach 循环遍历它。

例如：

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

我不确定它是否能很好地与mapping 插件一起使用。为什么要首先将 propertyName 添加到您的 observables？