Javascript 动态项目视图模型淘汰

我有很多（剔除）视图模型，它们从rest服务获取数据，然后填充“项”视图模型，这些模型非常简单，只包含来自rest接口的字段

我只是想知道是否有一种方法不必定义item viewmodels，而是以某种方式将它们创建为动态对象（其中每个属性都是可观察的）

因此，在下面的示例中，我不想使用“ItemViewModel”，只想在AddItems函数中说，它应该基于数据创建一个对象，并使每个条目都是可观察的。然后，传递的“itemName”包含“ItemViewModel1”（或在其他调用中包含“ItemViewModel2”…等）

例如，如果Json Rest输入有一个字段“LAST_NAME”，它将添加self.LAST_NAME=ko.observable（）”并填充该值等（因此我仍然可以在视图中引用它）

---

您可以尝试使用映射插件或Json函数，具体取决于您要查找的内容。我认为您要查找的是映射插件：

---

您可以尝试使用映射插件或Json函数，具体取决于您要查找的内容。我认为您要查找的是映射插件：

---

有。如果您的对象很简单且没有嵌套，您可以自己编写代码来映射它们：

var someJSON='{“firstName”：“John”，“lastName”：“Doe”}'；
var makeSimpleVM=函数（obj）{
//返回包含所有属性的新对象
//值包装在可观察的
返回对象
.钥匙（obj）
.reduce（函数（vm，键）{
vm[key]=ko.可观测（obj[key]）；
返回虚拟机；
}, {});
};
var myVM=makeSimpleVM（JSON.parse（someJSON））；
console.log（ko.isObservable（myVM.firstName））；//true
console.log（myVM.firstName（））；//John
myVM.firstName（“Jane”）；
console.log（myVM.firstName（））；//Jane

---

有。如果您的对象很简单且没有嵌套，您可以自己编写代码来映射它们：

var someJSON='{“firstName”：“John”，“lastName”：“Doe”}'；
var makeSimpleVM=函数（obj）{
//返回包含所有属性的新对象
//值包装在可观察的
返回对象
.钥匙（obj）
.reduce（函数（vm，键）{
vm[key]=ko.可观测（obj[key]）；
返回虚拟机；
}, {});
};
var myVM=makeSimpleVM（JSON.parse（someJSON））；
console.log（ko.isObservable（myVM.firstName））；//true
console.log（myVM.firstName（））；//John
myVM.firstName（“Jane”）；
console.log（myVM.firstName（））；//Jane

var ItemViewModel1 = function (data) {
    var self = this;
    self.PAR1 = ko.observable(data.PAR1) 
    self.PAR2 = ko.observable(data.PAR2) 
    self.PAR3 = ko.observable(data.PAR3) 
    self.PAR4 = ko.observable(data.PAR4) 
    // … etc
}
var MasterViewModel1 = function (data) {
    var self = this;
    ReportBaseViewModel.call(self)
}

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

    /* commonly used vars */
    self.report = ko.observable();
    self.searchedCallBackFunction = ko.observable();
    self.items = ko.observableArray();
    self.selecteditem = ko.observable();
    self.selectedPerson = ko.observable();

    /* method: print */
    self.PrintEventHandler = function (data) { window.print(); };

    /* method: add items to array */
    self.AddItems = function (data) {
        var newitems = ko.utils.arrayMap(data, function (item) {
            c = new window[self.itemname](item);
            return c;
        });
        self.items(newitems);
    };

    /* eventhandler: select one item */
    self.SelectEventHandler = function (item) {
        selecteditem(item);
    };

    self.GetReport = function (selectedPerson, viewContainer, url, itemName) {
        self.selectedPerson(selectedPerson);
        self.itemname = itemName;
        var jqxhr = $.ajax({
            url: url,
            type: "GET"
        }).done(function (data, textStatus, jqXHR) {
            if (data != null) {
                self.AddItems(data);
                $('#' + viewContainer).show();
                document.getElementById(viewContainer).scrollIntoView();
            }
        }).fail(function (jqXHR, textStatus, errorThrown) {
            console.log('fail' + JSON.stringify(jqXHR));
            toastr.options = {
                "closeButton": true,
                "debug": false,
                "newestOnTop": false,
                "progressBar": false,
                "positionClass": "toast-top-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "0",
                "hideDuration": "1000",
                "timeOut": "0",
                "extendedTimeOut": "0",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };
            toastr["error"]("ERROR");
        }).always(function (jqXHR, textStatus, errorString) {
            if (typeof self.searchedCallBackFunction() === 'function') {
                self.searchedCallBackFunction();
            }
        });
    }
}