【问题标题】:Incorrect this in select在选择中不正确
【发布时间】:2013-03-25 21:40:54
【问题描述】:

我正在尝试将打字稿与 Durandal 一起使用。我正在尝试使用 typescript 制作入门示例,该示例适用于大多数方法和类。但是在下面的 Flickr 类中,我在 select 方法中遇到了问题。当调用此方法时,似乎这不是 Flickr 类,而是选定项。 有人可以帮我找出问题所在吗? 其他方法按预期工作。

亲切的问候, 马尔维恩

///<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:

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

【问题讨论】:

    标签: typescript durandal


    【解决方案1】:

    要让“this”引用视图模型,您可以执行以下操作(假设 flickr.html 视图未更改):

    更改缩略图上的点击绑定标签来自

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

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

    因为您随后直接在 $parent 对象(视图模型)上调用 select 方法,所以视图模型将绑定到“this”。

    【讨论】:

    • +1 有趣的一点,我一直想知道为什么人们会那样做。现在说得通了:)
    • 我目前正在工作,所以无法访问该项目,但今晚会尝试一下。同时我发现了这个:stackoverflow.com/questions/13277537/…。我想知道它是否是同样的问题。我喜欢 Markus 解决方案,因为它不需要更改视图或视图模型,因为重新绑定可能在代码中的单个位置完成。
    • 如果您希望导航发生,那么您可能还希望返回函数的值,例如"click: function(item) { return $root.openDocument(item); }" 我需要用 Pager.js 来做这个
    猜你喜欢
    • 2019-04-17
    • 1970-01-01
    • 2021-08-18
    • 2011-03-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多