I am trying to use typescript with Durandal. I am trying to make a starter example that works with typescript, which works for most methods and classes. However, in the Flickr class below, there is a problem in the select method. When this method is called, it seems that this is not the Flickr class, but the selected element. Can someone help me figure out what is wrong? Other methods work as expected.
Regards, Marwijn
///<reference path='../../Scripts/typings/requirejs/require.d.ts'/> ///<reference path='../../Scripts/typings/durandal/durandal.d.ts'/> ///<reference path='../../Scripts/typings/knockout/knockout.d.ts'/> class Flickr { app: App; http: Http; displayName = 'Flickr'; images = ko.observableArray([]); constructor(app: App, http: Http) { this.app = app; this.http = http; } public activate() : any { //the router activator calls this function and waits for it to complete before proceding if (this.images().length > 0) { return; } return this.http.jsonp('http://api.flickr.com/services/feeds/photos_public.gne', { tags: 'mount ranier', tagmode: 'any', format: 'json' }, 'jsoncallback').then((response)=> { this.images(response.items); }); } public select(item : any) { //the app model allows easy display of modal dialogs by passing a view model //views are usually located by convention, but you an specify it as well with viewUrl item.viewUrl = 'views/detail'; this.app.showModal(item); } public canDeactivate() : any { //the router activator calls this function to see if it can leave the screen return this.app.showMessage('Are you sure you want to leave this page?', 'Navigate', ['Yes', 'No']); } } define(['durandal/http', 'durandal/app'], function (http, app) { return new Flickr(app, http); } );
which compiled into the following javascript:
var Flickr = (function () { function Flickr(app, http) { this.displayName = 'Flickr'; this.images = ko.observableArray([]); this.app = app; this.http = http; } Flickr.prototype.activate = function () { var _this = this; if(this.images().length > 0) { return; } return this.http.jsonp('http://api.flickr.com/services/feeds/photos_public.gne', { tags: 'mount ranier', tagmode: 'any', format: 'json' }, 'jsoncallback').then(function (response) { _this.images(response.items); }); }; Flickr.prototype.select = function (item) { item.viewUrl = 'views/detail'; this.app.showModal(item); }; Flickr.prototype.canDeactivate = function () { return this.app.showMessage('Are you sure you want to leave this page?', 'Navigate', [ 'Yes', 'No' ]); }; return Flickr; })(); define([ 'durandal/http', 'durandal/app' ], function (http, app) { return new Flickr(app, http); });
source share