Knockoutjs Component问题汇总

在使用KnockoutJs Component组件时，遇到的坑，让人晕头转向奶奶的，什么问题写的都没错啊！

1、Component绑定时，params:的参数应绑定属性引用不能绑定属性的值。

1）主页面、Component页面代码

<h1>主页面</h1>
<span>名称：</span><span data-bind="text:Name"></span><br />
<span>年龄：</span><span data-bind="text:age"></span><br />
<button data-bind="click:function(){eventClick()}">调用Component方法</button>
<h1>Component</h1>
<div class="row" data-bind="component:{name:'mycomponent',params:{name:Name(),age:age(),loadData:function(fun){ReLoadComponent=fun;}}}">

</div>

<span>名称：</span><span data-bind="text:MyName"></span><br />
<span>年龄：</span><span data-bind="text:MyAge"></span><br />

2）主页面Js代码，ComponentJs代码

    function MainViewModel() {
    self.Name = ko.observable("名称");
    self.age = ko.observable(12);
    self.eventClick= function() {
        self.age(123);
        self.ReLoadComponent();
    }
    self.ReLoadComponent = function() {
        
    };
}

    $(function () {
        ko.applyBindings(new MainViewModel());
    });

//注册knockout控件
ko.RegisterControl = function (controlName, viewModel, templateUrl) {
    if (!ko.components.isRegistered(controlName)) {
        ko.components.register(controlName, {
            viewModel: viewModel,
            template: (function () {
                var html = '';
                $.ajax({
                    url: templateUrl, data: {},
                    type: 'get',
                    async: false,
                    dataType: 'html',
                    success: function (result) {
                        html = result;
                    },
                    error: function () {
                    }
                });
                return html;
            })()
        });
    } else {
        if (window.console) {
            window.console.log("controlname [" + controlName + "] is registered.");
        }
    }
}
//我的组件
//params 
//name 名称, 
//age 年龄

function MyComponentViewModel(params) {
    //#region 属性/变量
    var self = this;
    self.MyName = ko.observable("");
    self.MyAge = ko.observable(0);

    function fnLoadData() {//重新加载页面 外部调用
        self.MyName(params.name +"、年龄"+ params.age);//修改名称
    }

    //#endregion  属性/变量
    //#region 初始化
    self.Init = function () {
        params.loadData(fnLoadData);
        self.MyName(params.name);
        self.MyAge(params.age);
    }
    //#endregion
    //viewModel初始化
    self.Init();
}
ko.RegisterControl("mycomponent", MyComponentViewModel, "/UserControls/MyComponentControl/MyComponentView.html?t=".url() + new Date().getTime());

点击“调用Component方法”的按钮的时候如下

此时Component中的名称应为“名称、年龄123”

这时再次点击“调用Component方法”的按钮的时候如下

发现第二次点击界面显示为我们预期结果。

这时调试代码，发现Component的Js代码初始化两次

问题原因：我们绑定到Component的age属性在点击“按钮”的时候对其修改了数值，这时Component认为是一个新数据，所以进行重新初始化Component

正确的绑定方式是“当绑定的数据需要变化的时候，应把这个属性的对象作为params参数，而不是将这个属性的值作为params参数”

修改后代码如下