Knockout.js घटकों और वेबपैक

Question

के साथ काम करना मैं मौजूदा knockout.js प्रोजेक्ट (नॉकआउट घटकों और requjs पर आधारित) को स्थानांतरित कर रहा हूं। मेरे पास एक स्टार्टअप फ़ाइल है जिसके साथ आवश्यकता है और यह काम करता है। फ़ाइल में स्क्रिप्ट प्रविष्टि

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

webpack को requirejs से बदल रहा है में, मेरा प्रवेश फ़ाइल के रूप में इस प्रकार है

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 से प्रेरणा ली।

कुछ चीजें है कि मैं पाने के लिए क्या करने की जरूरत थे इस

1. काम करने के बाद से ko घटक उपयोग कर रहा था requirejs पाठ भरी हुई है, मैं NPM पैकेज text-loader जोड़ने के लिए किया था।
2. आवश्यक लोडर का उपयोग न करने के लिए घटक लोडर बदल दिया। यह लोडिंग तोड़ रहा था क्योंकि साइट मॉड्यूल को खोजने में असमर्थता के बारे में शिकायत कर रही थी।
3. नॉकआउट को ठीक कहा गया था लेकिन उस समय, एचटीएमएल लोड नहीं किया गया था। इस का समाधान करने के लिए, मैं अपनी प्रविष्टि फ़ाइल $(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); 
      } 
     } 
    }) 
});