0

私は最近 3.2 にアップデートしましたが、利用可能なカスタム要素とコンポーネント バインディングを利用したいと思っています。

これで、次のようなカスタム コンポーネント ローダーを作成しました。

export class KnockoutComponentLoader implements IKnockoutTemplateLoader, IKnockoutViewModelLoader
{
    public loadTemplate(name: string, templateConfig: any, callback:Function)
    {
        console.log("Loading template: {0}".format(name));
        // Do some other stuff
    }

    public loadViewModel(name: string, viewModelConfig: any, callback:Function)
    {
        console.log("Loading vm: {0}".format(name));
        // Do some other stuff
    }
}

これは typescript モジュールですが、JS に変換され、以下を使用して登録されます。

var knockoutComponentLoader = new Framework.Loaders.KnockoutComponentLoader();
ko.components.loaders.unshift(knockoutComponentLoader);

私は FF でデバッグしましたが、すべてが期待どおりに動作しているように見えます。次に、数行後に次の登録を行います。

componentConfigurator.RegisterComponent("heading-menu", "shared", "HeadingMenuVM", "heading-menu");

カスタム ローダーで登録をまとめるクラスがあります。

export class ComponentConfigurator implements IComponentConfigurator
    {
        public RegisterComponent(componentName: string, moduleName: string,  viewModelName: string, templateName: string)
        {
            var configuration = this.GetComponentConfiguration(moduleName,  viewModelName, templateName);
            ko.components.register(componentName, configuration);
        }

        public GetComponentConfiguration(moduleName: string,  viewModelName: string, templateName: string) : any
        {
            return {
                viewModel: {
                    moduleName: moduleName,
                    name: viewModelName
                },
                template: {
                    moduleName: moduleName,
                    name: templateName
                }
            };
        }
    }

ここでのモジュールは js モジュールではなく、フレームワーク内の別の概念です。とにかく、すべてが期待どおりに登録され、最後にko.applyBindings()が呼び出され、ページにカスタム要素コンポーネントのインスタンスがある場合:

<heading-menu></heading-menu>

コンソール ログ メッセージは吐き出されず、見出しメニューには関連するテンプレートなどが挿入されません。そのため、ローダーの特定の実装の詳細を無視し、ローダーとコンポーネントの登録と要素の使用法を確認するだけで、これが機能している必要があります。 ?

その上のKOページから、私はすべての手順に従ったと思いますが、なぜ発砲しないのかわかりません...

4

1 に答える 1

0

私は問題を解決し、jsfiddle でモックアップしてすべてが機能したので、シナリオの違いを絞り込むと、ko.applyBindings が特定の要素に分割されました。追加された新しいコンポーネントは、それらのスコープ内に完全に収まっていないことが判明したため、既存の applyBindings ターゲットのスコープに追加する必要がありました。

于 2014-09-14T07:44:05.023 に答える