私信发送成功
Watch Star Fork

Zaaksam / koc-loaderNodeJSMIT

koc-loader 是一个 webpack loader,可以使用类似 Vue 单文件组件的风格来编写和使用 Knockout 组件。
克隆/下载
Zaaksam 最后提交于 2017-11-17 14:39 0.1.4
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
2017-11-15 23:20
2017-11-17 14:39
Loading...
README.md 1.47 KB

koc-loader

Knockout component loader for webpack

中文说明示例

You can write component file like Vue:

hello.koc

<template>
    <div data-bind="text: info"></div>
</template>

<script lang="ts">
import ko from "knockout";

export default class Component {
    info: KnockoutObservable<string>;

    constructor(params: any) {
        this.info = ko.observable("hello koc-loader");
    }
}
</script>

Webpack.config.js:

{
    module: {
        resolve: {
            extensions: ['.ts', '.js', '.koc']
        },
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    appendTsSuffixTo: [/\.koc$/]
                }
            },
            {
                test: /\.koc$/,
                loader: 'koc-loader'
            }
        ]
    }
}

app.ts (app.js)

import ko from 'knockout'
import Hello from './hello.koc'

ko.components.register('hello', Hello)

ko.applyBindings()

index.html

<html>
    <body>
        <hello></hello>
    </body>
    <script src="http://host/app.js"></script>
</html>

koc.d.ts

/// <reference types="knockout" />

declare module "*.koc" {
    const koc: KnockoutComponentTypes.Config
    export default koc
}

Thanks:

项目点评 ( 0 )

你可以在登录后,对此项目发表评论

4_float_left_people 4_float_left_close