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

Question

在文本框更改订阅调用中，我正在从服务器获取相关数据。我想了解如何将此数据绑定到我的视图模型，以便我的 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());
        }();

我想要做的是在我的 'gname' 订阅调用中附加 'events' 变量中可用的数据，以在 GSViewModel 中对 'eventschemas' 对象进行订阅。

真诚感谢任何帮助..

谢谢

Answer 1

根据抽象示例推荐最佳操作方案有点棘手。例如，在不知道你的 'G' 数据模型到底是什么样子的情况下，我不知道 "go to server and get data" 函数是否真的必须在 'G' 上，或者它是否可以安全地移入视图模型。

假设'G'是正确的对象，我会按照这个逻辑拆分它：

1) 从服务器加载数据的行为仍然由您的数据模型'G' 负责。但是，我们不是订阅它的名称字段并自动执行，而是将其设为一个名为 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 的订阅调用中收到的绑定数据

binding data received in subscribe call to viewmodel knockoutjs

knockout.js