4

我刚刚浏览了 KnockOut.js 教程，但用 TS 替换了 JS 代码。添加 SammyJS 时，我遇到了以下代码。任何人都可以建议 TS 中的 Sammy 功能代码如何？

function WebmailViewModel() {
// Data
var self = this;
self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
self.chosenFolderId = ko.observable();
self.chosenFolderData = ko.observable();
self.chosenMailData = ko.observable();

// Behaviours    
self.goToFolder = function(folder) { location.hash = folder };
self.goToMail = function(mail) { location.hash = mail.folder + '/' + mail.id };

// Client-side routes    
Sammy(function() {
    this.get('#:folder', function() {
        self.chosenFolderId(this.params.folder);
        self.chosenMailData(null);
        $.get("/mail", { folder: this.params.folder }, self.chosenFolderData);
    });

    this.get('#:folder/:mailId', function() {
        self.chosenFolderId(this.params.folder);
        self.chosenFolderData(null);
        $.get("/mail", { mailId: this.params.mailId }, self.chosenMailData);
    });

    this.get('', function() { this.app.runRoute('get', '#Inbox') });
}).run();    
};

ko.applyBindings(new WebmailViewModel());

我正在关注的教程在这里http://learn.knockoutjs.com/#/?tutorial=webmail

谢谢

4

2 回答 2

1

我不确定这是否能回答您的问题，但您可以利用此处描述 Sammy 的 TypeScript 定义文件https://github.com/borisyankov/DefinitelyTyped/blob/master/sammyjs/sammyjs.d.ts这应该有足够的 sammy api 供您继续您的教程。

下载定义文件并使用类似于下面的特殊注释进行引用。

///<reference path="sammyjs/sammyjs.d.ts" />
于 2013-10-23T04:11:46.377 回答
1

我知道这是一个老问题，但这确实给我带来了足够的痛苦，值得向未来的访客推荐。

我已经用 TypeScript 重写了上面的示例代码。

/// <reference path="../Scripts/typings/jquery/jquery.d.ts" />
/// <reference path="../Scripts/typings/Sammy/Sammy.d.ts" />
import sammy = require("sammy");
class WebmailViewModel
{
    // Data
    public folders: Array<string> = ['Inbox', 'Archive', 'Sent', 'Spam'];
    public chosenFolderId: KnockoutObservable<any> = ko.observable();
    public chosenFolderData: KnockoutObservable<any> = ko.observable();
    public chosenMailData: KnockoutObservable<any> = ko.observable();

    // Behaviours    
    public goToFolder = function (folder) { window.location.hash = folder };
    public goToMail = function (mail) { window.location.hash = mail.folder + '/' + mail.id };

    // Client-side routes    
    public SammyApp: sammy.Application =
    Sammy().get('#:folder', context =>
    {
        this.chosenFolderId(context.params.folder);
        this.chosenMailData(null);
        $.get("/mail", { folder: context.params.folder }, this.chosenFolderData);
    }).get('#:folder/:mailId', context =>
    {
        this.chosenFolderId(context.params.folder);
        this.chosenFolderData(null);
        $.get("/mail", { mailId: context.params.mailId }, this.chosenMailData);
    }).get('', context =>
    {
        context.app.runRoute('get', '#Inbox');
    }).run();
};

然后，在 $(document).ready()

var viewModel = new WebmailViewModel;
ko.applyBindings(viewModel);

非常感谢@Vladimir，他的回答堆栈溢出问题 19395335 让我找到了解决方案。

干杯。

于 2015-12-20T07:07:55.633 回答