在使用KnockoutJs Component組件時，遇到的坑，讓人暈頭轉(zhuǎn)向奶奶的，什么問題寫的都沒錯啊！

1、Component綁定時，params:的參數(shù)應(yīng)綁定屬性引用不能綁定屬性的值。

1）主頁面、Component頁面代碼

1 <h1>主頁面</h1> 2 <span>名稱：</span><span data-bind="text:Name"></span><br /> 3 <span>年齡：</span><span data-bind="text:age"></span><br /> 4 <button data-bind="click:function(){eventClick()}">調(diào)用Component方法</button> 5 <h1>Component</h1> 6 <div class="row" data-bind="component:{name:'mycomponent',params:{name:Name(),age:age(),loadData:function(fun){ReLoadComponent=fun;}}}"> 7 8 </div> View Code 1 <span>名稱：</span><span data-bind="text:MyName"></span><br /> 2 <span>年齡：</span><span data-bind="text:MyAge"></span><br /> View Code

2）主頁面Js代碼，ComponentJs代碼

1 function MainViewModel() { 2 self.Name = ko.observable("名稱"); 3 self.age = ko.observable(12); 4 self.eventClick= function() { 5 self.age(123); 6 self.ReLoadComponent(); 7 } 8 self.ReLoadComponent = function() { 9 10 }; 11 } 12 13 $(function () { 14 ko.applyBindings(new MainViewModel()); 15 }); View Code 1 //注冊knockout控件 2 ko.RegisterControl = function (controlName, viewModel, templateUrl) { 3 if (!ko.components.isRegistered(controlName)) { 4 ko.components.register(controlName, { 5 viewModel: viewModel, 6 template: (function () { 7 var html = ''; 8 $.ajax({ 9 url: templateUrl, data: {}, 10 type: 'get', 11 async: false, 12 dataType: 'html', 13 success: function (result) { 14 html = result; 15 }, 16 error: function () { 17 } 18 }); 19 return html; 20 })() 21 }); 22 } else { 23 if (window.console) { 24 window.console.log("controlname [" + controlName + "] is registered."); 25 } 26 } 27 } 28 //我的組件 29 //params 30 //name 名稱, 31 //age 年齡 32 33 function MyComponentViewModel(params) { 34 //#region 屬性/變量 35 var self = this; 36 self.MyName = ko.observable(""); 37 self.MyAge = ko.observable(0); 38 39 function fnLoadData() {//重新加載頁面 外部調(diào)用 40 self.MyName(params.name +"、年齡"+ params.age);//修改名稱 41 } 42 43 //#endregion 屬性/變量 44 //#region 初始化 45 self.Init = function () { 46 params.loadData(fnLoadData); 47 self.MyName(params.name); 48 self.MyAge(params.age); 49 } 50 //#endregion 51 //viewModel初始化 52 self.Init(); 53 } 54 ko.RegisterControl("mycomponent", MyComponentViewModel, "/UserControls/MyComponentControl/MyComponentView.html?t=".url() + new Date().getTime()); View Code

點擊“調(diào)用Component方法”的按鈕的時候如下

此時Component中的名稱應(yīng)為“名稱、年齡123”

這時再次點擊“調(diào)用Component方法”的按鈕的時候如下

發(fā)現(xiàn)第二次點擊界面顯示為我們預(yù)期結(jié)果。

這時調(diào)試代碼，發(fā)現(xiàn)Component的Js代碼初始化兩次

問題原因：我們綁定到Component的age屬性在點擊“按鈕”的時候?qū)ζ湫薷牧藬?shù)值，這時Component認為是一個新數(shù)據(jù)，所以進行重新初始化Component

正確的綁定方式是“當綁定的數(shù)據(jù)需要變化的時候，應(yīng)把這個屬性的對象作為params參數(shù)，而不是將這個屬性的值作為params參數(shù)”

修改后代碼如下

?

轉(zhuǎn)載于:https://www.cnblogs.com/shanhe/p/KnockoutJsComponent.html

總結(jié)

以上是生活随笔為你收集整理的Knockoutjs Component问题汇总的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。