hottowel (durandal) + typescript

นี่คือโพสต์แรกของฉัน ดังนั้นขอให้ฉันโชคดีนะ :)

ฉันต้องการใช้ผ้าขนหนูร้อน (durandal) + typescript ฉันได้ติดตามกระทู้เหล่านี้: - how-can-i-use-a-class-for-my-shell-viewmodel-in-durandal - how-to-use-fancybox-in-combination-with-durandal-en-typescript - incorrect-this-in-select

และยังได้ลองตัวอย่าง DurandalTypescriptExample ด้วย

ตัวอย่างนี้ไม่สามารถรันได้กับข้อผิดพลาดนี้:

เกิดข้อผิดพลาดของเซิร์ฟเวอร์ในแอปพลิเคชัน '/'

ไม่สามารถหาทรัพยากรได้.

ตอนแรกฉันตัดสินใจที่จะเปลี่ยน viewmodels ของฉันด้วย typescript ก่อน และหลังจากนั้นก็จะทำกับ shell ด้วย แต่ในทั้งสองกรณีฉันได้รับข้อผิดพลาดนี้:

นี่คือโค้ด shell.ts ของฉัน (ซึ่งฉันใช้จากตัวอย่างนี้) :

/// <reference path="../durandal/durandal.d.ts" />

import _router = module('durandal/plugins/router');
import app = module('durandal/app');

export var router = _router;

export function search() {
    app.showMessage('Search not yet implemented...');
}
export function activate() {
    return router.activate('welcome');
}

และฉันได้รับข้อผิดพลาดนี้:

- JavaScript runtime error: 'exports' is undefined

มีไอเดียไหม?

และถ้าเป็นไปได้ จะขอบคุณสำหรับวิธีแก้ไขที่ใช้ได้จริง

ขอบคุณครับพวกเรา มาดูกันว่าจะเกิดอะไรขึ้น

คำตอบ #1

ฉันมีปัญหาเดียวกันกับ DurandalTypescriptExample อย่างไรก็ตาม โค้ดในโปรเจกต์นี้แสดงให้เห็นว่าคุณสามารถนำโค้ด typescript ของคุณไปใช้งานในไฟล์ viewmodel ได้อย่างไร ถ้าคุณเพียงแน่ใจว่าจะทำการ dispose ตัวแปรที่ Durandal ต้องการอย่างเป็นสาธารณะ อย่างน้อยฟังก์ชัน activate และตัวแปร title

ดูตัวอย่างโค้ดด้านล่าง:

/// <reference path="../../dts/knockout/knockout.d.ts" //>
export class ViewModel {
    title: string =  'Home View';
    MyTitle: KnockoutObservableString; //MyTitle can be referenced in home.html as vm.MyTitle
    public activate() {
         this.MyTitle = ko.observable(this.title + " with my ko title");
         return true;
    }
}

export var vm = new ViewModel();
//The Durandal plugin-interface variables
export var title = vm.title;
export var activate = function () { return vm.activate(); };

เนื่องจากฉันไม่พบโครงการที่สร้างไว้ล่วงหน้าเพื่อสาธิตเรื่องนี้ ฉันจึงต้องสร้างของตัวเอง ดูเวอร์ชันของฉันของโครงการ Hot Towel บน GitHub:

https://github.com/Svakinn/TypeTowel

คำตอบ #2

ถ้าคุณส่งออกบางอย่างในสโคประดับโลก คุณอยู่ในพื้นที่โมดูลภายนอกและคุณต้องใช้ไลบรารีของบุคคลที่สามเพื่อจัดการโมดูลของคุณ

ผมแนะนำให้คุณใช้ RequireJS โดยพื้นฐานดังต่อไปนี้ใน TypeScript:

export function f(){
}

สร้าง js ต่อไปนี้:

function f() {
}
exports.f = f;

`exports` เป็นตัวแปรที่ถูกกำหนดโดยตัวโหลดโมดูลของบุคคลที่สาม หากคุณไม่มีตัวโหลดโมดูลดังกล่าว ตัวแปร exports จะไม่ถูกกำหนด บทเรียนของฉันได้อธิบายเรื่องนี้เพิ่มเติม