javascript - Knockout - 具有多个模型的 foreach 循环中的函数

Question

我的 HTML 在这里，当用户单击列表时，我希望它执行一个函数 loadLayerSource。

<div data-bind="foreach: layerSources">
    <label data-bind="text: $data.SubCategory"></label>
        <ul data-bind="foreach: $data.CategorySources">
            <li data-bind="click: function () {loadLayerSource(Source, Type, URL)}">
                <span data-bind="text: ReadableName">Name</span>
                <span data-bind="text: Description">Description</span>
            </tr>
        </ul>
</div>

为了实现这一目标，我有以下几点:

//This is data that would be returned from a web service
var jsonData = [{
        "SubCategory": "Report",
        "CategorySources": [{
            "Source": "cvr01",
            "Category_ID": "cvr01",
            "ReadableName": "Climate Viewer Reports",
            "Type": "kml",
            "URL": "/layers/kml/cv-reports/cv-reports-0415.kml",
            "Description": "Content disclaimer etc"
    }]
}, {
        "SubCategory": "Earthquake",
        "CategorySources": [{
            "Source": "usgs-all-hour",
            "Category_ID": "",
            "ReadableName": "USGS - All Earthquakes (Last Hour)",
            "Type": "geojson",
            "URL": "http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson",
            "Description": "Content disclaimer etc"
            }, {
            "Source": "kml-emsc",
            "Category_ID": "",
            "ReadableName": "Euro-Med Earthquakes - CSEM/EMSC",
            "Type": "kml",
            "URL": "http://www.emsc-csem.org/Earthquake/Map/earth/kml.php",
            "Description": "Content disclaimer etc"
    }]
}];

//This is our ProductType model
var typeModel = function (source, name, type, url, description) {
    var self = this;
    self.Source = ko.observable(source);
    self.ReadableName = ko.observable(name);
    self.Type = ko.observable(type);
    self.URL = ko.observable(url);
    self.Description = ko.observable(description);
};


var typeReturn = function (source, name, type, url, description) {
    alert(source + name);
};




//This is the model that contains the header (Category) and an array of typeModels (Products)
var gridModel = function (subcategory, categorySources) {
    var self = this;
    self.SubCategory = subcategory;
    self.CategorySources = ko.observableArray(categorySources);
};


//This is the viewmodel that contains an array of gridModels
var settingsViewModel = function () {
    this.layerSources = ko.observableArray();
    var me = this;
    //This is where you would normally make an ajax call to get your data
    //TODO figure out a way to reduce the amount of loops
    $.each(jsonData, function (key, value) {
        $.each(value, function (k, v) {
            if (k == 'CategorySources') {
                var categorySources = [];
                $.each(v, function (a, b) {
                    categorySources.push(new typeModel(b.Source, b.ReadableName, b.Type, b.URL, b.Description));
                });
                me.layerSources.push(new gridModel(value.SubCategory, categorySources));
            }
        });
    });
};
ko.applyBindings(new settingsViewModel());

无论我将以下代码放在哪里，我都会收到未定义的错误。

self.loadLayerSource = function() {
    alert(layerType);
};

jsFiddle Link

Answer 1

查看更新后的 fiddle :http://jsfiddle.net/ucz8yzxy/2/

您需要使用 $root 正确调整对 loadLayerSource 的调用范围，因为 foreach 循环的深度为 2 层。另外，如果在 viewModel 中，loadLayerSource 应该附加到 this 而不是 self，因为 self 不是在那里定义的。

由于这些字段是可观察的，因此请确保对它们进行评估(括号)。