KnockoutJs компоненты с RequireJs и машинопись

Question

При настройке компонентов в Knockout документации Я вижу:

define(['knockout', 'text!./my-component.html'], function (ko, htmlString) { 
    function MyComponentViewModel(params) { 
     // Set up properties, etc. 
    } 

    // Return component definition 
    return { viewModel: MyComponentViewModel, template: htmlString }; 
}); 

Я использую машинопись в моем проекте. Как преобразовать предыдущий код в TypeScript?

Я попытался это:

import ko = require("knockout"); 
import htmlString = require("text!./my-component.html"); 

class MyComponentViewModel { 
} 

Но насчет return заявления?

return { viewModel: MyComponentViewModel, template: htmlString }; 

Answer 1

Я использую следующую конфигурацию (это, кажется, здесь немного overhelmed, но я надеюсь, что это помогает):

"index.ts", configurates require.js:

require.config({ 
    baseUrl: 'Scripts', 

    paths: { 
     //main libraries 
     jquery: '../Scripts/jquery-2.1.3', 
     knockout: '../Scripts/knockout-3.2.0.debug', 

     //shortcut paths 
     components: '../components', 
     modules: '../modules' 
    }, 

    shim: { 
     jquery: { 
      exports: '$' 
     } 
    } 
}); 

// ...... cutted 
// here goes app entry point code 

«приложений .ts "из папки" modules "содержит регистрационный код компонента:

import ko = require("knockout"); 

ko.components.register('like-widget', { 
    viewModel: { require: 'components/like-widget' }, 
    template: { require: 'text!components/like-widget.html' } 
}); 

" like-widget.ts "из" компонента s»папка, вид модели компонента:

import ko = require("knockout"); 

class LikeWidgetViewModel { 
    constructor(params: { value: KnockoutObservable<string> }) { 
     this.chosenValue = params.value || ko.observable<string>(); 
    } 

    chosenValue: KnockoutObservable<string>; 

    like() { 
     this.chosenValue('like'); 
    } 
    dislike() { 
     this.chosenValue('dislike'); 
    } 
} 

export = LikeWidgetViewModel; 

"как-widget.html" из "папки" компонентов:

<div class="like-or-dislike" data-bind="visible: !chosenValue()"> 
    <button data-bind="click: like">Like it</button> 
    <button data-bind="click: dislike">Dislike it</button> 
</div> 

<div class="result" data-bind="visible: chosenValue"> 
    You <strong data-bind="text: chosenValue"></strong> it. 
    And this was loaded from an external file. 
</div>