Question

在文本框更改订阅呼叫时，我从服务器获取相关数据。我想了解如何将此数据绑定到我的viewmodel，以便它可用于我的html代码..

我的HTML代码：

    <div><input type="text" class="form-control" data-bind="value: gname" /></div>

    <div>
        <table>

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

                    </td>

                </tr>
            </tbody>
        </table>
        <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
    </div>
</div>

我的javascript代码：

var AppScope = function () {
            function EventSchemaCondition(data) {
                this.schema = ko.observable(data.schema);

            }

            function Gdetails(data) {
                this.eventschemacondition = ko.observable(data.eventschemacondition);
            }

            function G(data) {
                this.gname = ko.observable(data.gname);
                this.gdetails = ko.observable(data.gdetails);
                this.gname.subscribe(function (val) {
                    console.log(val + "subscribe fired");
                    //go to server and get data
                    var events = [{ "schema": "Test" }, { "schema": "Another Test" }];

                });
            }

            function GsViewModel() {
                var self = this;
                self.g = ko.observable(
                new G({
                    gname: "",
                    gdetails: new Gdetails({ eventschemacondition: new EventSchemaCondition({ schema: "" }) })
                }));

                self.eventschemas = ko.observableArray();
            }

            ko.applyBindings(new GsViewModel());
        }();

我想要做的是附上＆＃39; events＆＃39;中可用的数据。变量在我的＆＃39; gname＆＃39;订阅电话＆＃39; eventschemas＆＃39; GSViewModel中的对象。

真心感谢任何帮助。

由于

Answer 1

在抽象示例上推荐最佳行动方案有点棘手。例如，不知道你的＆＃39; G＆＃39;数据模型看起来很像，我不知道＆＃34;是否转到服务器并获取数据＆＃34;功能真的必须在G＆＃39; G，或者它是否可以安全地移动到视图模型中。

假设＆＃39; G＆＃39;是正确的对象，我会根据这个逻辑将其拆分：

1）从服务器加载数据的行为仍然是您的数据模型的责任＆＃39; G＆＃39;。但是，我们不是订阅其名称字段并自动执行，而是将其设置为名为getEventsForName的可调用函数

2）搜索的行为是用户界面的一种能力，因而也是视图模型的责任。因此，我们为您的视图模型提供eventSearchField可观察搜索<input>，并让它调用G以获取新事件并使用它填充eventschemas

var AppScope = function () {
    function EventSchemaCondition(data) {
        this.schema = ko.observable(data.schema);
    }

    function Gdetails(data) {
        this.eventschemacondition = ko.observable(data.eventschemacondition);
    }

    function G(data) {
        this.gname = ko.observable(data.gname);
        this.gdetails = ko.observable(data.gdetails);

        this.getEventsForName = function getEventsForName(name) {
            //go to server and get data
            return events = [{
                "schema": "Test"
            }, {
                "schema": "Another Test"
            }];
        };
    }

    function GsViewModel() {
        var self = this;

        self.g = ko.observable(
            new G({
                gname: "",
                gdetails: new Gdetails({
                    eventschemacondition: new EventSchemaCondition({
                        schema: ""
                    })
                })
            })
        );

        self.eventschemas = ko.observableArray();

        self.eventSearchField = ko.observable();
        self.eventSearchField.subscribe(function(searchTerm) {
          var searchResults = self.g().getEventsForName(searchTerm);

          self.g().gname(searchTerm);
          self.eventschemas(searchResults);
        });
    }

    ko.applyBindings(new GsViewModel());
}();

我从您发布的标记片段中不知道您的确切绑定范围，但我猜测$data是self.g()，$parent是您的视图模型：

<div><input type="text" class="form-control" data-bind="value: $parent.eventSearchField" /></div>

<div>
    <table>
        <tbody>
            <tr data-bind="with:gdetails">
                <td>
                    <select data-bind="options: $root.eventschemas, optionsText: 'schema', value:eventschemacondition().schema"></select>

                </td>

            </tr>
        </tbody>
    </table>
    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
</div>

订阅中收到的绑定数据调用viewmodel knockoutjs

1 个答案: