Utilizzo dei componenti e del Webpack di Knockout.js

Question

Sto spostando un progetto knockout.js esistente (basato sui componenti Knockout e requirejs). Ho un file di avvio con richiede e funziona. La voce dello script nel file è

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

Nel passaggio da requirejs a webpack, il mio file di entrata è la seguente

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

base.html è lo stesso di quello che è nel file HTML originale ed è definito come

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

Il problema è che quando eseguo la pagina, non succede nulla. Quando metto un debugger nel file startup.js, in realtà viene colpito, quindi so che viene chiamato ma non c'è niente nella pagina ma l'html di base. I componenti non sono renderizzati.

Come posso farlo funzionare?

Answer 1

Ha preso spunto da here.

C'erano alcune cose che avevo bisogno di fare per ottenere questo lavoro

1. Poiché il ko-componente è stato utilizzato il testo requirejs caricato, ho dovuto aggiungere il pacchetto NPM text-loader.
2. Modificato il caricatore componenti per non utilizzare requirejs. Questo stava rompendo il caricamento dal momento che il sito si lamentava della sua incapacità di trovare il modulo.
3. Knockout è stato chiamato, ma al momento, il codice HTML non è stato caricato. Per risolvere questo problema, ho aggiunto il seguente alla fine del mio file di entrata $(document).ready(function(){ ko.applyBindings({}); });

testato questo con uno dei componenti in modo dovrò sia faccio uguale per tutti o attendere un po 'per una soluzione migliore.

Ho modificato solo il componente barra laterale come test.

Contenuto 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({}); 
}); 

Contenuto collaterali 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); 
      } 
     } 
    }) 
});