javascript - knockout 变更事件处理程序

Question

我花了几个小时试图让一个简单的事件调用在我的 durandal/knockout 应用程序中正常工作。

上下文

我有一个用户可以从选择框中选择的语言列表:

    <select class="form-control select2"
        data-bind="event: { change: app.languageChanged }, options:languages,
        optionsText:'label',
        optionsValue:'code',
        value:app.selectedLanguage"></select>

属性 app.selectedLanguage 是一个 ko.observable。我知道这行得通，因为已预先选择了正确的项目。

    this.selectedLanguage = ko.observable(options.defaultLanguage);

我还有一个事件处理程序，用于监听该选择框的更改，以便我可以向需要通知的应用程序的其他部分发送消息:

    languageChanged : function(data, event) {
        console.log(data);
        console.log(event);
        console.log(this.selectedLanguage());

        app.trigger('language:change', this.selectedLanguage());
    },

问题

1. 第一个参数“data”不包含所选项目，而是包含所有项目(实际上，它似乎是完整的当前 View 模型)。
2. 如果 1. 不起作用，那么至少可以从可观察的“selectedLanguage”中获取新值。不幸的是，它似乎总是具有旧值。因此，每当我更改选择框选项时，我总是会得到之前选择的值。

问题

所以问题是:我做错了什么？我确信这通常可以正常工作，我一定是遗漏了什么地方。

我以为我终于明白了knockout的工作原理，但现在我遇到了下一期。如果有人可以帮助我，我将不胜感激。

编辑[已解决]

感谢 xdumaine，这里是(不错且简单的)解决方案:

在我的 html 模板中，我删除了更改事件:

    <select class="form-control select2"
        data-bind="options:languages,
        optionsText:'label',
        optionsValue:'code',
        value:app.selectedLanguage"></select>

在我的 App View 模型(我到处都需要)中，我现在订阅 ko.observable 而不是监听事件处理程序:

    define([ 'durandal/app', 'underscore', 'knockout', 'myapp/myapp' ], function(app, _, ko, myapp) {

        "use strict";

        function App(options) {

            if (!(this instanceof App)) {
                throw new TypeError("App constructor cannot be called as a function.");
            }

            this.options = options || {};

            // Set the initial language.
            this.selectedLanguage = ko.observable(options.defaultLanguage);
                    // *** Subscribes to the observable ***
            this.selectedLanguage.subscribe(function(newValue) {
                console.log(newValue);
                app.trigger('language:change', newValue);
            });

            _.bindAll(this, 'getSelectedLanguage');
        }

        App.prototype = {
            constructor : App,
            getSelectedLanguage : function() {
                return this.selectedLanguage();
            }
        }

        return App;
    });

此代码因此已被删除，不再需要:

languageChanged : function(data, event) {
    console.log(data);
    console.log(event);
    console.log(this.selectedLanguage());

    app.trigger('language:change', this.selectedLanguage());
},

最好的问候，迈克尔

Answer 1

为什么要绑定(bind)到 select change 事件而不是订阅 selectedLanguage？

var self = this;
self.selectedLanguage = ko.observable();
self.selectedLangauge.subscribe(function(newValue) {
    console.log(newValue);
    app.trigger('language:change', newValue);
});

如果你想像你拥有的那样去做，请知道:knockout 中的事件绑定(bind)总是将对 viewModel 的引用作为第一个参数，将事件数据作为第二个参数，因此你可能必须检查事件如果你这样做的话，可以获得目标并提取值(value)。 2 不起作用的原因是您的更改事件在通知 knockout 可观察对象之前触发，因此您会遇到计时问题。这在不同的浏览器中可能有不同的行为。

我建议尽可能坚持使用可观察订阅，而不是使用 DOM 事件。