我花了几个小时尝试在我的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事件.