Knockout.js 将订阅调用中接收的数据绑定到viewmodel knockoutjs

在一个文本框更改订阅呼叫中，我从服务器获取相关数据。 我想了解如何将此数据绑定到我的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>

我要做的是将“gname”subscribe调用中的“events”变量中的可用数据附加到GSViewModel中的“eventschemas”对象

衷心感谢您的帮助

---

谢谢

在一个抽象的例子中推荐最佳的行动方案有点棘手。例如，在不知道“G”数据模型的真实外观的情况下，我不知道“转到服务器并获取数据”函数是否真的必须在“G”上，或者是否可以安全地将其移动到视图模型中

假设‘G’是正确的对象，我会根据以下逻辑将其拆分：

1） 从服务器加载数据的行为仍然由数据模型“G”负责。但是，我们没有订阅它的name字段并自动执行该操作，而是将其设置为一个可调用函数，名为

getEventsForName

2） 搜索行为是用户界面的一种能力，因此是视图模型的责任。因此，我们为您的视图模型提供了一个可观察的

eventSearchField

，用于搜索

，并让它在引擎盖下调用

G

，以获取新事件并用它填充

eventschema

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>

是否有任何特定的实用程序可以创建一个单独的方法geteventsforname，然后在subscribe调用中调用它，而不是进入服务器并在subscribe调用中获取数据..正如我所说的-我不知道，这取决于实际类“G”的设计。如果您认为没有具体的需要，那么直接在视图模型中加载数据也是绝对好的。

<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>