Question

我遇到了淘汰js和映射插件与分层视图模型的问题

我的viewmodel的结构有点像这样：

VM = {
    members:[
        {
            name:"name 1",
            volunteering:[{...},{...},{...}]
        },
        {
            name:"name 1",
            volunteering:[{...},{...},{...}]
        }
    ]
}

每个成员都在一个标签中，每个标签都有一个志愿活动网格。单击网格中的项目会弹出一个对话框以编辑志愿活动。此时我克隆对象以方便“取消编辑”功能

var Volunteer = {};
var koContext=ko.contextFor(this);
Volunteer = ko.mapping.toJS(koContext.$data);  //plain js volunteer
Volunteer.index=koContext.$parent.EventVolunteers().indexOf(koContext.$data);  //index of volunteer in member volunteer array
ko.applyBindings(ko.mapping.fromJS(Volunteer),$("#dialog-EditVolunteer")[0]); //bind new volunteer obj to dialog

到目前为止似乎没问题，点击对话框上的保存会导致问题。

var volunteer = ko.mapping.toJS(ko.contextFor(this).$data);
ko.mapping.fromJS(volunteer,{},ko.contextFor(currentTab).$data.EventVolunteers()[volunteer.index]);

此时，属性会在视图模型中更新，但不会在主屏幕的网格中更新。

看来ko.mapping.fromJS正在替换observable而不是更新它。

Answer 1

我个人喜欢创建这样的模型。这里的抽象更有意义。

function VolunteerInfo(data){
  var self = this;
  self.activitiesName = ko.observable(data.name);
  // any other info not all of it has to be mapped 
  // unless you plan on sending it back.
}
function MembersInfo(data){
  var self = this;
  self.name = ko.observable(data.name)// w.e it is labeled as under json
  self.volunteering = ko.observableArray([]);
  var mappedVolunteers = $.map(data.volunterring, function(item){
    var volunteer = new VolunteerInfo(item);
    return volunteer;
  });
  self.volunterring(mappedVolunteers);
}
function VM(){
  var self = this;
  self.members = ko.o
  var request = $.getJSON("webservice address");
  request.done(function () {
    var mappedMembers = $.map(data.volunterring, function(item){
      var member = new MemberInfo(item);
      return member;
    });
    self.members(mappedMembers);
  }
}
// apply bindings to VM ect ect.

Answer 2

我不确定我完全理解你在做什么。

但是我试图在项目列表中执行撤消功能，我在阵列上使用了这个：

observableArray.replace(newData, ko.mapping.fromJS(original))

我将新数据作为点击处理程序的参数。

当我存储原件时，我基本上有这个：

        //Dupe check
        self.undoCache.Emails.pop(jQuery.grep(self.undoCache.Emails, function (element, index) { return element.Id == data.Id(); })[0]);
        //Store original
        self.undoCache.Emails.push(ko.mapping.toJS(data));

“电子邮件”是我正在编辑的对象。我只存储原始数据，而不是可观察数据。这让我可以使用替换。我不确定这本身有多正确，但取消对我有用。

Answer 3

在这种情况下，我最终的解决方案是使用“克隆”视图模型中编辑的值设置原始VM上的属性。

但是对于新项目，我现在使用knockout plugin

更新Knockout JS映射插件中的子属性

3 个答案: