Question

自上周以来，我一直在研究这个问题，而且我被困住了。

我有一个3层对象，除了顶层之外我似乎无法使用任何功能。我确定这是我的映射，因为我下载了敲除上下文调试器，我看不到我在子对象中创建的函数，但我可以看到父对象中的顶级函数。

编辑添加小提琴：

var BottomSectionViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);
}
// BottomSection is also a collection inside MiddleSectionData
var MiddleSectionMapping = {
    'MiddleSectionData': {
        key: function (MiddleSection) {
            return ko.utils.unwrapObservable(MiddleSection.SectionId);
        },
        create: function (options) {
            return new MiddleSectionViewModel(options.data);
        }
    }
}

var MiddleSectionViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, MiddleSectionMapping, self);

    self.MiddleSectionFunction = function () {
        alert("hi from the middlesection data. Unfortunately this doesn't even show up when I look at the knockout context debugger, and doesn't run.");
    }.bind(this);
}



var MainViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, MiddleSectionViewModel, self);

    self.selectedTab = ko.observable(1);

    //Set href value of element
    self.selected = ko.observable(null);

    //initial set to show first tabpanel when loading page
    self.init = ko.observable(1);

    //Get href value og element
    self.getHref = function () {
        var target;
        var element = event.target.hash;
        target = element.substr(1);
        return target;
    };

    //Show Tabpanel
    self.showBlock = function () {
        console.log("setting the block");
        var target = self.getHref();
        self.selected(target);
        self.init(2);
    };
    self.TopSectionFunction = function () {
        alert("this one shows if I use click:$parent.TopSectionFunction ");
    }
};

function uncomment(fn){
  return fn.toString().split(/\/\*\n|\n\*\//g).slice(1,-1).join();
}

var data = {
  "Miscdata1": true,
  "Miscdata2": "Bob Markup",
  "Miscdata3": "2018-01-04T09:15:35.0825342-06:00",
  "MiddleSectionData": [
    {
      "BottomSectionName": "bottom1",
      "BottomSectionData": [
        {
          "SectionId": 1,
          "Data1": 1,
          "Data2": 0,
          "Data3": true,
          "Data4": 0
        },
        {
          "SectionId": 2,
          "Data1": 1,
          "Data2": 0,
          "Data3": true,
          "Data4": 0
        }
      ],
      "SectionId": 1
    },
    {
      "BottomSectionName": "bottom2",
      "BottomSectionData": [
        {
          "SectionId":  1,
          "Data1": 1,
          "Data2": 0,
          "Data3": true,
          "Data4": 0
        },
        {
          "SectionId": 2,
          "Data1": 1,
          "Data2": 0,
          "Data3": true,
          "Data4": 0
        }
      ],
      "SectionId": 1
    },
    {
      "BottomSectionName": "bottom3",
      "BottomSectionData": [
        {
          "SectionId": 1,
          "Data1": 1,
          "Data2": 0,
          "Data3": true,
          "Data4": 0
        },
        {
          "SectionId": 2,
          "Data1": 1,
          "Data2": 0,
          "Data3": true,
          "Data4": 0
        }
      ],
      "SectionId": 1
    }
  ]
};

console.log("test");
var viewModel = new MainViewModel(data);
ko.applyBindings(viewModel);

Answer 1

想出来。我更新了jsfiddle。

问题出在我设置self = this的地方。

将其更改为：

var self = options.data;

并将其移动到映射函数修复它。

编辑：实际上，事实证明我的范围问题。我以前没有前面的var。

子对象中的knockout映射函数

1 个答案: