我正在移动现有的 knockout.js 项目(基于 Knockout 组件和 requirejs)。我有一个需要的启动文件，它可以工作。文件中的脚本入口是

<script src="app/require.config.js"></script>
 <script data-main="app/startup" src="bower_modules/requirejs/require.js"></script>

在requirejs转webpack中，我的入口文件如下

require("../src/app/startup");
document.write(require("raw!./base.html"));

base.html 和原来的html文件一样，定义为

<div>
  <side-bar></side-bar>
  <page-container></page-container>
</div>

问题是当我运行该页面时，没有任何反应。当我在 startup.js 文件中放置一个调试器时，它实际上被命中了，所以我知道它正在被调用，但页面上除了基本 html 之外什么都没有。组件未呈现。

我如何让它工作？

最佳答案

灵感来自 here .

我需要做一些事情才能让它工作

1. 由于 ko-component 使用 requirejs 文本加载，我不得不添加 npm 包 text-loader。
2. 将组件加载器更改为不使用 requirejs。这会中断加载，因为该站点提示无法找到该模块。
3. Knockout 调用正常，但当时尚未加载 html。为了解决这个问题，我将以下内容添加到我的条目文件的末尾 $(文档).ready(函数(){ ko.applyBindings({}); });

已使用其中一个组件对此进行了测试，因此我必须对所有组件进行相同的测试，或者等待一段时间以获得更好的解决方案。

我只是作为测试修改了侧边栏组件。

entry.js的内容

require("./../src/bower_modules/semantic/dist/semantic.css");
require("css!./../src/css/styles.css");
var ko = require("knockout");
var $ = require("jquery");
require("../src/app/startup");
require("components/side-bar/side-bar.js");

document.write(require("raw!./base.html"));

$(document).ready(function(){
    ko.applyBindings({});
});

side-bar.js的内容

define(["require", "exports", "knockout", "observations", "config", "viewManager", "db", "ko-mapping", "text!./side-bar.html"], function (require, exports, ko, observations, config, viewManager, db, koMapping) {
    var setting = db.first("settings");
    var functions = {
        scrollToHome: function () { return viewManager.scrollToHome(); }
    };
    exports.template = require("text!./side-bar.html");
    var viewModel = (function () {
        function viewModel(params) {
            this.height = ko.computed(function () { return observations.pageHeight(); });
            this.settings = config.sideBarSettings;
            this.inverted = ko.computed(function () { return setting.invertMenu() ? "inverted" : ""; });
        }
        viewModel.prototype.onClick = function (item) {
            //try processing using the item data
            if (item.view) {
                var raw = koMapping.toJS(item.view);
                config.controllers.page.insertPage(raw);
                return;
            }
            if (item.fn) {
                var fn = item.fn();
                if (!fn)
                    return; //this is for when it is not an observable but an actual function
                if (!functions[fn])
                    throw "Could not find side-bar function " + fn;
                functions[fn]();
                return;
            }
            throw "Sidebar item does not contain any executable action";
        };
        viewModel.prototype.dispose = function () {
            // This runs when the component is torn down. Put here any logic necessary to clean up,
            // for example cancelling setTimeouts or disposing Knockout subscriptions/computeds.
        };
        return viewModel;
    })();
    exports.viewModel = viewModel;

    console.log('inside sidebar');
    ko.components.register('side-bar', {
        template: require("text!./side-bar.html"),
        viewModel: {
            createViewModel: function(params, componentInfo){
                //debugger;
                console.log('yes');
                return new viewModel(params);
            }
        }
    })
});

关于javascript - 使用 Knockout.js 组件和 webpack，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30091136/