0

knockoutjs には、いくつかのロジックを実行するカスタム コンポーネント ローダーがあります。基本的には createViewModel 関数からテンプレートを変更したいと考えています。があることcomponentInfo.templateNodesは知っていますが、どうすればよいかわかりません。

createViewModel 関数で変更したい理由は、コンポーネントが表示されるたびに createViewModel 関数が呼び出されるためです。

ああ、コードは言葉よりもはるかに多くのことを語っているので、ここで自分でチェックしてください。

ko.components.loaders.unshift({
    getConfig: function (name, callback) {
        var component;  // The component gets loaded somewhere. (Sadly I can't alter the template here because it is only called once.)

        callback({
            viewModel: {
                createViewModel: function (params, componentInfo) {
                    // Load these parameters somewhere
                    var args;
                    var location;

                    // I'd love to add these two items before and after my template.
                    var before = "<div data-bind=\"with: " + location + "\">";
                    var after = "</div>";

                    // Construct a viewModel with the data provided. 
                    return app.core.helpers.construct(component.viewModel, location, args);
                }
            },
            template: component.template
        });
    },

    loadTemplate: function (name, template, callback) {
        // Get the location again.
        var location;

        // I just want to load the template while applying the correct binding scope from the createViewModel.
        var templateString = "<!-- ko stopBinding: true -->\n<!-- ko with: " + location + " -->\n" + template + "\n<!-- /ko -->\n<!-- /ko -->";

        // Just let it load.
        ko.components.defaultLoader.loadTemplate(name, templateString, callback);
    }
});
4

1 に答える 1

0

私はなんとか実用的なソリューションを作成することができました（初期段階ではありますが）。テンプレート コードを componentInfo に追加する方法がまだわからないので、componentInfo で利用可能なものを編集できることを発見しました。(以下の解決策を参照してください)

ko.components.loaders.unshift({
    getConfig: function (name, callback) {
        var component;

        callback({
            viewModel: {
                createViewModel: function (params, componentInfo) {
                    // Load these parameters somewhere
                    var args;
                    var location;

                    /*
                     *  The first one is the element we're binding on. The next sibling is the element we probably want to alter.
                     */ 
                    if (componentInfo.element.nextSibling.nodeType == 8 && componentInfo.element.nextSibling.nodeValue.indexOf("[injectNamespace]") > -1) {
                        componentInfo.element.nextSibling.nodeValue =  "ko with: models." + name.replace('/', '.');
                    }

                    return app.core.helpers.construct(component.viewModel, location, args);
                }
            },
            template: component.template
        });
    },

    loadTemplate: function (name, template, callback) {
        var templateString = "<!-- ko with: [injectNamespace] -->\n" + template + "\n<!-- /ko -->";

        ko.components.defaultLoader.loadTemplate(name, templateString, callback);
    }
});
于 2015-06-24T08:56:06.710 に答える