带有 RequireJs 和 TypeScript 的 KnockoutJs 组件答案

【问题标题】：KnockoutJs components with RequireJs and TypeScript带有 RequireJs 和 TypeScript 的 KnockoutJs 组件
【发布时间】：2016-05-27 10:33:44
【问题描述】：

在 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。如何在 TypeScript 中转换之前的代码？

我试过这个：

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

class MyComponentViewModel {
}

但是return 声明呢？

return { viewModel: MyComponentViewModel, template: htmlString };

【问题讨论】：

标签： javascript knockout.js typescript requirejs

【解决方案1】：

我使用以下配置（这里似乎有点不知所措，但我希望这会有所帮助）：

“index.ts”，配置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

“modules”文件夹中的“application.ts”包含组件注册码：

import ko = require("knockout");

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

“components”文件夹中的“like-widget.ts”，组件的视图模型：

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;

“组件”文件夹中的“like-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>

【讨论】：