@abstraqt-dev/jsxknockout 中文文档教程

Question

这个包包含 jsx-dom 库的扩展，允许生成 knockout 通过使用自定义标签虚拟元素。

用法：

import * as ko from "knockout";
import * as React from "@abstraqt-dev/jsxknockout";

ko.component.register("my-component", {
    viewModel: {
        createViewModel: function(params, componentInfo) {
            var vm = {
                panelShown: ko.observable(false),
                buttonClick: function() {
                    vm.panelShown(!vm.panelShown());
                }
            };

            return vm;
        }
    },
    template: [
        <div>
            <ko-if data-bind="panelShown">
                <h1>Hello World</h1>
            </ko-if>
            <div>
                <button type="button" data-bind="click: buttonClick">Switch</button>
            </div>
        </div>
    ]
});

document.appendChild("<my-component></my-component>");

ko.applyBinding({});

注意：每个名称以“ko-”开头的 html 元素都被视为一个剔除虚拟元素占位符，并按如下方式进行转换：

    <ko-if data-bind="BooleanValue">
        <h1>Test</h1>
    </ko-if>

    // Is transformed to

    <!-- ko if: BooleanValue -->
    <h1>Test</h1>
    <!-- /ko -->

    <ul>
        <ko-foreach data-bind="Items">
            <li data-bind="text: $data">

            </li>    
        </ko-foreach>
        <li>
        </li>
    </ul>

    // Is transformed to 

    <ul>
        <!-- ko foreach: Items -->
            <li data-bind="text: $data">

            </li>    
        <!-- /ko -->        
        <li>
        </li>
    </ul>