使用Knockout.js組件和webpack

Question

我正在移動現有的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。組件不被渲染。

我如何得到這個工作？

Answer 1

從here獲得靈感。

有報道說，我需要做的就是一些東西，這個因爲KO-組件使用了該requirejs加載文本工作

1. ，我不得不添加故宮包text-loader。
2. 將組件加載器更改爲不使用requirejs。這是因爲該網站抱怨無法找到該模塊而中斷了加載。
3. 淘汰賽被稱爲好的，但在當時，HTML尚未加載。爲了解決這個問題，我增加了以下我的入境文件 $(document).ready(function(){ 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({}); 
}); 

內容側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); 
      } 
     } 
    }) 
});