处理事件和手动订阅下拉列表更改淘汰赛

Question

这里我有 'eventschemas' 数据，它是 ['schema' 和 'schemaconditiondetails'] 的数组，而 'schemaconditiondetails'] 又是 ['schemadetail' 的数组（具有 'schemapropety'、'propertyvalue' 和 'propertycondition') 和 'schemaconditions'（这又是 'propertycondition' 的数组）] .

我正在尝试在 'propertycondition' 下拉列表更改时调用事件 'setcondition'。我也有一个关于相同更改的手动订阅电话..

手动订阅调用和事件调用未在 javascript 中调用。此外，因为事件调用是从 html 抛出的，所以会抛出以下错误：

消息：无法处理绑定 "event: function (){return {change:setcondition} }"

消息：setcondition 未定义

如果我执行 $parent.setcondition 但它仍然不显示 console.log 消息

，则会出现此错误消息

我的html代码：

 <div data-bind="with: g">
            <div>
                <input type="text" data-bind="value: gname" />
            </div>


            <table>
                <tbody>
                    <tr data-bind="with: gdetails">
                        <td>

                            <select data-bind="options: $root.eventschemas, optionsText: 'schema', value: eventschemacondition().schema"></select>

                            <table data-bind="with:eventschemacondition().schema">
                                <tbody data-bind="foreach: schemaconditiondetails">
                                    <tr>
                                        <td><input type="text" data-bind='value: schemadetail.schemaproperty' style="width:150px" /></td>
                                        <td data-bind="with: schemadetail">
                                            <select data-bind="options: $parent.schemaconditions, optionsText:'propertycondition', value: propertycondition, event: {change: setcondition}" style="width:150px"></select>
                                        </td>
                                        <td><input type="text" data-bind='value: schemadetail.propertyvalue' style="width:150px" /></td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

我的javascript代码：

 var eventschemas = [{
            "schema": "Test",
            "schemaconditiondetails": [{
                "schemadetail": { "schemaproperty": "Test1", "propertyvalue": 12, "propertycondition": undefined },
                "schemaconditions": [{
                    "propertycondition": "propertycondition1"
                }, {
                    "propertycondition": "propertycondition2"
                }]
            }, {
                "schemadetail": { "schemaproperty": "Test2", "propertyvalue": 42, "propertycondition": undefined },
                "schemaconditions": [{
                    "propertycondition": "propertycondition1"
                }, {
                    "propertycondition": "propertycondition2"
                }]
            }]
        }, {
            "schema": "Another Test",
            "schemaconditiondetails": [{
                "schemadetail": { "schemaproperty": "Another Test1", "propertyvalue": 12, "propertycondition": undefined },
                "schemaconditions": [{
                    "propertycondition": "propertycondition1"
                }, {
                    "propertycondition": "propertycondition2"
                }]
            }, {
                "schemadetail": { "schemaproperty": "Another Test2", "propertyvalue": 12, "propertycondition": undefined },
                "schemaconditions": [{
                    "propertycondition": "propertycondition1"
                }, {
                    "propertycondition": "propertycondition2"
                }]
            }]
        }];


        var AppScope = function () {
            function EventSchemaConditionDetails(data) {
                this.schemaproperty = ko.observable(data.schemaproperty);
                this.propertycondition = ko.observable(data.propertycondition);
                this.propertyvalue = ko.observable(data.propertyvalue);
                this.propertycondition.subscribe(function (newText) {
                    console.log(newText + "subscribe fired");
                });
                this.setcondition = function (name) {
                    console.log("event fired");
                    self.propertycondition(name);
                };
            };
            function EventSchemaCondition(data) {
                this.schema = ko.observable(data.schema);
                this.schemaconditiondetails = ko.observableArray(data.schemadetail);

            };
            function Gdetails(data) {
                this.eventschemacondition = ko.observable(data.eventschemacondition);
            };
            function G(data) {
                this.gname = ko.observable(data.gname);
                this.gdetails = ko.observable(data.gdetails);
            };
            function GsViewModel() {
                var self = this;
                self.g = ko.observable(new G({
                    gname: "gname",
                    gdetails: new Gdetails({
                        eventschemacondition: new EventSchemaCondition({
                            schema: "",
                            schemaconditiondetails: ko.observableArray([new EventSchemaConditionDetails({
                                schemaproperty: "",
                                propertycondition: "",
                                propertyvalue: ""
                            })])
                        })
                    })
                }));

                self.eventschemas = eventschemas;
            }
            ko.applyBindings(new GsViewModel());
        }();

真诚感谢所有帮助..

谢谢

Answer 1

好吧，那是你在那里犯的一个简单错误。您直接将平面数组分配给 self.eventschemas 而不是您需要将数组内容转换为可观察的内容，因此视图和模型之间的双向绑定将完好无损

查看模型：

        self.eventschemas = ko.observableArray(ko.mapping.fromJS(eventschemas)());

你可以看到我正在使用ko.mapping如果你是新手不要害怕第一次看它很简单只是参考knockout docs很好那里有内容。好吧，您还可以使用 ko.utils.arrayMap 通过循环并最终推入 self.g（在您的情况下）

使平面数组成为可观察的

正在工作 here

旁注：当某些事情没有改变时，下定决心回溯问题

处理事件和手动订阅下拉列表更改淘汰赛

handling events and manual subscription on dropdownlist change knockout

knockout.js