淘汰动态键作为参考映射，在 JSON 和 Observable 之间

Question

我从数据库中检索表格数据。 由于该表是在非友好标签中设计的，因此我必须添加一个新对象（HeaderName）来存储从另一个引用中检索的友好名称。

我正在尝试将 ko.observable 中的原始数据替换为我之前为表格列显示检索到的标题。

是否可以将其与 ko.mapping 函数进行映射？没有循环它？ 我想知道 ko.mapping ，关键功能.. 试图理解它。

在这个例子中 -> (http://jsfiddle.net/nEaSJ/ ) 数据通过 'children' 映射：

在我的情况下，我有 prepName 需要映射到 ColumnName

---

下面是我认为应该进行操作的函数中的 2 个。在我在 UI 上迭代它之前

var label = function (data) {
    this.label = ko.observable(data);
    //console.log(data);  //sample value = Cnv_Id

    var labeldesc = ko.mapping.fromJS(data, {}, vm.columns);
    console.dir(labeldesc);  //Should return me  "Count Numeral Variable Identification"
}
//vm.columns (ko.observable)
      //vm.columns=[{"$id":"1","ColumnName":"Id","system_type_id":56,"primaryCol":1,"__ko_mapping__":{"ignore":[],"include":["_destroy"],"copy":[],"observe":[],"mappedProperties":{"$id":true,"ColumnName":true,"system_type_id":true,"primaryCol":true},"copiedProperties":{}},"isVisible":true,"HeaderName":"Id","SystemField":-1,"Visible":true}
    //,{"$id":"2","ColumnName":"Cnv_Id","system_type_id":231,"primaryCol":0,"__ko_mapping__":{"ignore":[],"include":["_destroy"],"copy":[],"observe":[],"mappedProperties":{"$id":true,"ColumnName":true,"system_type_id":true,"primaryCol":true},"copiedProperties":{}},"isVisible":true,"HeaderName":"Count Numeral Variable Id","SystemField":-1,"Visible":true},
    //{"$id":"3","ColumnName":"Cox_No","system_type_id":175,"primaryCol":0,"__ko_mapping__":{"ignore":[],"include":["_destroy"],"copy":[],"observe":[],"mappedProperties":{"$id":true,"ColumnName":true,"system_type_id":true,"primaryCol":true},"copiedProperties":{}},"isVisible":true,"HeaderName":"Cox No","SystemField":-1,"Visible":true},
    //{"$id":"4","ColumnName":"CX_Name","system_type_id":175,"primaryCol":0,"__ko_mapping__":{"ignore":[],"include":["_destroy"],"copy":[],"observe":[],"mappedProperties":{"$id":true,"ColumnName":true,"system_type_id":true,"primaryCol":true},"copiedProperties":{}},"isVisible":true,"HeaderName":"CX Name","SystemField":-1,"Visible":true}]


//data input for bindSelectedModel
//data = [{"propName":"$id","propValue":"2"},{"propName":"Id","propValue":5421},{"propName":"Cnv_Id","propValue":"CV0001-1-1"},
{"propName":"Cox_No","propValue":"12"},{"propName":"CX_Name","propValue":"Exz"}]

function bindSelectedModel(data) {

  var labelmapping = {
      'propName': {
          create: function (options) {
              console.log('mapping:', options.data);
              return new label(options.data);
          }
      }
  }
  vm.selectedItemModel = ko.mapping.fromJS(data, labelmapping);
    vm.selectedItemHeader = vm.columns(); 
}

Answer 1

可以看到 columns 包含“正确”名称，dataPropertiesName 包含 data 属性的名称，而 data 包含您的视图模型。

所以 sn-p 循环遍历每个项目并替换它们的属性名称。

var columns = ['FriendlyName1', 'FriendlyName2'];
var dataPropertiesName = ['Name1', 'Name2'];

var data = [{
    Name1: ko.observable(1),
    Name2: ko.observable(2)
}, {
    Name1: ko.observable(3),
    Name2: ko.observable(2)
}, {
    Name1: ko.observable(2),
    Name2: ko.observable(7)
}, ];

for (var index = 0; index < data.length; index++) {
    var item = data[index];
    item = ko.mapping.toJS(item);
    for (var propIndex = 0; propIndex < columns.length; propIndex++) {
        var value = item[dataPropertiesName[propIndex]]
        delete item[dataPropertiesName[propIndex]];
        item[columns[propIndex]] = value;
    }
    data[index] = item;
}


var result = JSON.stringify(data);

alert(result);

希望对你有帮助