Question

我在这里有＆＃39; eventschemas＆＃39;数据是[＆＃39; schema＆＃39;和＆＃39; schemaconditiondetails＆＃39;]反过来又是一个[＆＃39; schemadetail＆＃39;（具有＆＃39; schemapropety＆＃39;，＆＃39; propertyvalue＆＃39;和＆＃39; ; propertycondition＆＃39;）和＆＃39; schemaconditions＆＃39;（反过来又是＆＃39; propertycondition＆＃39;的数组）。

我试图召集活动＆＃39; setcondition＆＃39; on＆＃39; propertycondition＆＃39;下拉列表更改。我也在同一个变化上有一个手动订阅电话..

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

消息：无法处理绑定＆＃34;事件：function（）{return {change：setcondition}}＆＃34;

消息：未定义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而不是你需要将数组内容转换为observable，所以双向绑定在视图和模型之间是完整的

查看型号：

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

你可以看到我正在使用ko.mapping如果你是刚接触的那么一开始就不要害怕它的简单只需参考 knockout docs 相当不错的内容。那么你也可以通过循环使用ko.utils.arrayMap将一个平面数组变成可观察的，最后进入self.g（在你的情况下）

工作fidde here

旁注：如果某些内容没有发生变化，那就会让您的思绪无法观察回溯问题

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

1 个答案: