Knockoutjs Component Problem Summary

In the use of KNOCKOUTJS component components, encountered the pit, let people dizzy grandmother's, what question write All right Ah!

1, component binding timing, params: The parameter should be bound to the property reference cannot bind the value of the property.

1) homepage, component page code

1 <H1>Main Page</H1>2 <span>Name:</span><spanData-bind= "Text:name"></span><BR/>3 <span>Age:</span><spanData-bind= "Text:age"></span><BR/>4 <ButtonData-bind= "Click:function () {Eventclick ()}">Calling the component method</Button>5 <H1>Component</H1>6 <Divclass= "Row"Data-bind= "Component:{name: ' MyComponent ', Params:{name:name (), Age:age (), loaddata:function (fun) {Reloadcomponent=fun;}}}">7 8 </Div>

View Code

1 <span>Name:</span><spanData-bind= "Text:myname"></span><BR/>2 <span>Age:</span><spanData-bind= "Text:myage"></span><BR/>

View Code

2) Main Page JS code, COMPONENTJS code

1     functionMainviewmodel () {2Self. Name = ko.observable ("name");3Self.age = ko.observable (12);4self.eventclick=function() {5Self.age (123);6 Self . Reloadcomponent ();7     }8Self. Reloadcomponent =function() {9         Ten     }; One } A  -$(function () { -Ko.applybindings (NewMainviewmodel ()); the});

View Code

1 //registering the Knockout control2Ko. Registercontrol =function(ControlName, ViewModel, Templateurl) {3     if(!ko.components.isRegistered (controlname)) {4 Ko.components.register (controlname, {5 Viewmodel:viewmodel,6Template: (function () {7                 varhtml = ' ';8 $.ajax ({9 Url:templateurl, data: {},TenType: ' Get ', OneAsyncfalse, ADataType: ' HTML ', -Successfunction(Result) { -HTML =result; the                     }, -Errorfunction () { -                     } -                 }); +                 returnhtml; -             })() +         }); A}Else { at         if(window.console) { -Window.console.log ("controlname [" + ControlName + "] is registered."); -         } -     } - } - //My Components in //params - //name, to //Age +  - functionMycomponentviewmodel (params) { the     //#region Properties/Variables *     varSelf = This; $Self. MyName = Ko.observable ("");Panax NotoginsengSelf. MyAge = ko.observable (0); -  the     functionFnloaddata () {//Reload page External call +Self. MyName (Params.name + ", age" + params.age);//Modify Name A     } the  +     //#endregion Properties/Variables -     //#region Initialization $Self. Init =function () { $ Params.loaddata (fnloaddata); - Self . MyName (params.name); - Self . MyAge (params.age); the     } -     //#endregionWuyi     //ViewModel Initialization the Self . Init (); - } WuKo. Registercontrol ("MyComponent", Mycomponentviewmodel, "/usercontrols/mycomponentcontrol/mycomponentview.html?t=". URL () +NewDate (). GetTime ());

View Code

Click on the "Call component Method" button when the following

The name in component should now be "name, age 123"

When you click the "Call Component Method" button again, the following

Find the second click of the interface shown as our expected result.

At this time debug code, found component JS code initialization two times

Problem reason: We bind to the age property of component when we click "button" to change the value, when component think is a new data, so to reinitialize component

The correct way to bind is "when the bound data needs to change, the object of this property should be used as the params parameter, instead of the value of this property as the params parameter"

The modified code is as follows

Knockoutjs Component Problem Summary