knockout.js Knockout ko. mapping.fromJS不工作

ctzwtxfj  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(118)

我试图使用敲除Map,但它并不像我预期的那样工作。在这里,我创建了最简单的小提琴,我可以,它不工作。
我错过了什么吗?
https://jsfiddle.net/p48d11j5/1/

function Model(){
    var self = this;

    self.Id = ko.observable(0);
    self.Name = ko.observable("Default");
    self.Visible = ko.observable(false);
    self.Items = ko.observableArray([]);
}

function ModelItem(){
    var self = this;

    self.Id = ko.observable(0);
    self.Name = ko.observable("Default item name")
}

var m = new Model();

ko.mapping.fromJS({
    Id:1,
    Name: "Test",
    Visible: true,
    Items: [
    {
        Id:1,
        Name:"First"
    },
    {
        Id:2,
        Name:"Second"
    }
  ]
}, m);

ko.applyBindings(m);
  • edit:我正在处理嵌套数组,所以我添加了array*
  • edit2:我想让模型“类型化”使用函数或ko。计算它们的属性 *
8fq7wneg

8fq7wneg1#

如果使用两个参数调用ko.mapping.fromJS
ko.mapping.fromJS(data, mappedObject)如果第二个参数是已经创建的mappedObject,则第二个参数将被视为viewModel而不是options
你要做的就是:fromJS(data,{},viewModel)--这个函数将数据放入模型中。

ko.mapping.fromJS({
    Id:1,
    Name: "Test",
    Visible: true,
    Items: [{Id: 1, Name: "First"}, {Id: 2, Name: "Second"}]
  }, {} ,m);  // pass the second argument as an empty object.
9njqaruj

9njqaruj2#

试试这个

var m = ko.mapping.fromJS({
    Id:1,
  Name: "Test",
  Visible: true,
  Items: [
    {
        Id:1,
      Name:"First"
    },
    {
        Id:2,
      Name:"Second"
    }
  ]
}, new Model());

ko.applyBindings(m);

工作示例:https://jsfiddle.net/p48d11j5/2/

r1zk6ea1

r1zk6ea13#

您可以尝试使用Map插件来设置默认状态以及应用更新:

// Set up the initial model.
var model = ko.mapping.fromJS({
    Id: 0,
    Name: "Default",
    Visible: false,
    Items: []
});

ko.applyBindings(model);

// Map new data from the "server"...
var model = ko.mapping.fromJS({
    Id:1,
    Name: "Test",
    Visible: true,
    Items: [
    {
        Id:1,
        Name:"First"
    },
    {
        Id:2,
        Name:"Second"
    }
    ]
}, model);

// ...or directly manipulate the model.
model.Id(2);
model.Items.push({Id: 3, Name: "Third"});

https://jsfiddle.net/3evtx022/

相关问题