选择不正确 [英] Incorrect this in select

问题描述

我正在尝试在Durandal中使用打字稿。我正在尝试使用适用于大多数方法和类的typescript的入门示例。但是，在下面的Flickr类中，我在select方法中遇到问题。调用此方法时，似乎不是Flickr类，而是所选的项。
有人可以帮助我找出问题所在吗？
其他方法正在按预期方式工作。

I'm trying to use typescript with Durandal. I'm trying to make starter example working with typescript, which works for most methods and classes. However in the Flickr class below I experience a problem in the select method. When this method is called it seems that this is not the Flickr class, but the selected item. Can someone help me figure out what is wrong ? The other methods are working as expected.

亲切的问候，
Marwijn

Kind 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's 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's 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);
} );

已被编译为以下javascript：

which is 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);
});
//@ sourceMappingURL=flickr.js.map

推荐答案

要获取 this以引用视图模型，您可以执行以下操作（假设flickr.html视图未更改）：

To get 'this' to reference the view model you can do the following (assuming the flickr.html view has not been changed):

更改单击绑定在缩略图上的

Change the click binding on the thumbnail a tag from

<a href="#" class="thumbnail" data-bind="click:$parent.select">

至

<a href="#" class="thumbnail" data-bind="click: function (item) { $parent.select(item); }">

因为然后直接在$ parent对象（视图模型）上调用select方法模型将绑定到 this。

Because you are then invoking the select method directly on the $parent object (the view model) the view model will be bound to 'this'.

这篇关于选择不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！