将对象传递给通过 require 加载的淘汰组件

【问题标题】：Passing object to knockout component loaded via require将对象传递给通过 require 加载的淘汰组件
【发布时间】：2014-12-01 07:03:54
【问题描述】：

我刚刚开始研究淘汰赛组件。

我正在尝试执行以下操作。

来自主模块

var setup = {color:"pink"};
ko.components.register('headerbar', {require:"/headerbar"});

组件

define(["ko", "text!./headerbar.html"], function(ko, html) {
"use strict";

var vm = function(prms){
      //use passed setup info here  

};

return { viewModel: vm, template: html };
});

我希望能够做到这一点，所以我可以传入一些设置细节，而不必通过其参数在组件的每个实例中表达它们

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案1】：

这就是我最终的结果。

    var ctxPassingLoader = {
        to_pass: {

        },
        loadComponent:function(name, cfg, callback){
            if(cfg.ctx){
                this.to_pass[name] = cfg.ctx;
            }
            app.ko.components.defaultLoader.loadComponent(name, cfg, callback);
        },
        loadViewModel: function(name, original, callback) {
            var ctx = this.to_pass[name] || original.ctx;
            this.to_pass[name] = null;
            if (ctx) {
                var wrapper;
                if(original.createViewModel){
                    wrapper = {
                        createViewModel : function(params, info){
                            original.createViewModel(params, info, ctx);
                        }
                    };
                }else{
                    wrapper = function(params){
                        return original(params, ctx);
                    };
                }
                app.ko.components.defaultLoader.loadViewModel(name, wrapper, callback);


            } else {
                callback(null);
            }
        }
    };
    app.ko.components.loaders.unshift(ctxPassingLoader);

调用代码

var setup = {color:"pink"};
ko.components.register('headerbar', {require:"/headerbar", ctx:setup});

【讨论】：

knockoutjs.com/documentation/…