我花了几个小时尝试在我的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());
- },
问题
>第一个参数’data’不包含所选项目,而是包含所有项目(实际上,它似乎是完整的当前视图模型).
>如果1.不起作用,那么至少可以从可观察的“selectedLanguage”获得新的值.不幸的是,总是似乎有旧的价值.所以每当我更改selectBox选项时,我总是得到先前选择的值.
题
所以问题是:我该怎么做错了?我确信这通常正常工作,我必须在某处丢失某物.
我以为我终于明白了淘汰赛是如何工作的,但现在我遇到了下一个问题.如果有人可以帮助我,我将非常感激.
编辑[解决]
感谢xdumaine,这是(好的和简单的)解决方案:
在我的html模板中,我删除了change-event:
- <select class="form-control select2"
- data-bind="options:languages,value:app.selectedLanguage"></select>
在我的App视图模型(我需要无处不在),我现在订阅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());
- },
最好的祝福,
迈克尔
解决方法
为什么绑定到选择更改事件,而不是只订阅selectedLanguage?
- var self = this;
- self.selectedLanguage = ko.observable();
- self.selectedLangauge.subscribe(function(newValue) {
- console.log(newValue);
- app.trigger('language:change',newValue);
- });
如果你想像这样做,知道这一点:事件绑定在敲除总是得到一个参考的viewmodel作为第一个参数,事件数据作为第二个,所以你可能必须检查事件得到如果您这样做,则定位并提取值.原因2不工作是您的更改事件在通知敲门声之前触发,因此您可以获得时间安排问题.这可能在不同的浏览器中有不同的行为.
我建议坚持使用可观察的订阅,而不是使用DOM事件.