3

私は Knockout コンポーネントを使用しており、モジュールの読み込みにはSystem.jsを使用しています。

カスタム コンポーネント ローダーがあります。

var myComponentLoader = {
  loadComponent: function(name, componentConfig, callback) {
    System.import(componentConfig.myLoader)
    .then(function(loadedComponent) {

      var result = {
        template: ko.utils.parseHtmlFragment(loadedComponent.componentTemplate),
        createViewModel: loadedComponent.MyComponentViewModel
      }
      callback(result);
    })
    // .catch(function(myError){
    //   alert(myError);
    //   callback(null);
    // });
    }
};

// Register it
ko.components.loaders.unshift(myComponentLoader);

ko.components.register('my-component', { myLoader: './app/components/components' });

しかし、これは次のメッセージで失敗します。

TypeError: undefined は関数ではありません {stack: (...), message: "undefined is not a function"}

これは私のresult.templateがどのように見えるかです:

<div>This is my component template</div>
<div data-bind="text: myName"></div>

これは私のresult.createViewModelがどのように見えるかです:

 function MyComponentViewModel(params) {
        // Set up properties, etc.
        this.myName = ko.observable("Amy Smith");
        this.doSomething(params);
        this.boundAt = ko.observable(moment().format());
    }

完全なエラーは次のとおりです。

Potentially unhandled rejection [1] TypeError: undefined is not a function
    at Object.ko.utils.cloneNodes (http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:270:48)
    at cloneTemplateIntoElement (http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3644:41)
    at null.callback (http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3621:21)
    at Function.ko_subscribable_fn.notifySubscribers (http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:1103:38)
    at http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3151:54
    at http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3169:21
    at http://localhost:8081/lib/bower/knockout@3.3.0/dist/knockout.js:3198:29
    at eval (http://localhost:8081/app/components/components-bootstrapper.js!eval:32:13)
    at O (http://localhost:8081/lib/es6-module-loader.js:7:7439)
    at K (http://localhost:8081/lib/es6-module-loader.js:7:7071)
4

1 に答える 1

4

カスタム構成処理ロジックを提供するには、ドキュメントloadComponentの説明に従ってメソッドを実装する必要があります。

ただし、ドキュメントによると、次のように返されるものに注意する必要があります。

  • templateプロパティにはDOM ノードの配列が含まれている必要があります。したがって、ローダーが文字列をロードする場合は、最初に次のように解析する必要があります。 

    template: ko.utils.parseHtmlFragment(loadedComponent.componentTemplate)

  • ファクトリ関数createViewModelを含める必要があるため、ビュー モデル コンストラクター関数を直接ではありません。だからあなたはそれをラップする必要があります

    createViewModel: function (params, componentInfo) { return new loadedComponent.viewModel(params, componentInfo); }
于 2015-03-03T12:51:03.933 に答える