淘汰赛跨类数据绑定答案

【问题标题】：Knockout cross class data binding淘汰赛跨类数据绑定
【发布时间】：2013-06-25 21:15:18
【问题描述】：

目标：让用户能够调整映射结果。

我遇到了一个问题，我需要实际更改用于数据绑定元素的实例。免责声明：我的 json 数据结构可能已关闭，我愿意接受可能的修改。我正在编写一个表头映射应用程序，以便用户可以验证服务器映射的标题是否正确。如果出现问题，用户将能够映射标题。我没有能够弄清楚如何在更改选择菜单时实际更新绑定到结果的数据。感觉应该超级简单。我一直发现自己基本上是一个完成的淘汰赛应用程序，而不是最后一步......

标记片段：

<div id="wrapper" data-bind="foreach: headings">
    <h1>Bind from this</h1>
    <select data-bind="value: selectMenuIdVal, event: { change: updateListing }">
    <option> </option>
        <!-- ko foreach: $root.headings -->
        <option data-bind="value: $data.CC_FIELD_ID, visible: $data.VENDOR_FIELD_NAME(), text: $data.VENDOR_FIELD_NAME"></option>
        <!-- /ko -->
    </select>
    <h1>To this</h1>
    <ul data-bind="foreach: listingFields">
        <li data-bind="text: $data.VALUE"></li>
    </ul>
</div>

KO片段：

var Heading = function(data) {
    var self = this;

    var heading = ko.mapping.fromJS(data, {}, this);
        heading.selectMenuIdVal = ko.observable(heading.CC_FIELD_ID());
        // heading.listingFields gets mapped by the mapping plugin

    this.updateListing = function(ko_evt, js_evt) {
                    //TODO
            // Get the listing results from the value of the select menu

            // self.listingFields(those listings);
    }

    return heading;
}

这是我的小提琴：http://jsfiddle.net/breck421/SLT9B/1/

【问题讨论】：

标签： json knockout.js knockout-mapping-plugin 2-way-object-databinding

【解决方案1】：

我真的不确定你是否理解正确。

如果这是您要找的，请告诉我：

this.updateListing = function (ko_evt, js_evt) {
    console.log("fired");
    //Do something freaking awesome!!!!!!!
    if (vm.dataRepo) {
        for (var i = 0; i < vm.dataRepo.HEADINGS.length; i++) {
            if (vm.dataRepo.HEADINGS[i].CC_FIELD_ID == heading.selectMenuIdVal()) {


                var listingFields = [];

                for (var j = 0; j < vm.dataRepo.LISTINGS.length; j++) {
                    var listing = vm.dataRepo.LISTINGS[j];
                    var field = listing[i];

                    if (field) {
                        listingFields.push(field);
                    }
                }
                heading.listingFields(listingFields);

                //            heading.listingFields = listingFields;
            }
        }
    }
}

See fiddle

希望对你有帮助。

【讨论】：

谢谢达米安。这非常有帮助。