knockout.js - Knockout js $root $parent keyword -

i learning knockout js. reading many article , code various source. got small code knockout js. have confusion understand few area in code. highlight , 1 please me understand.

here full code

html

<ul data-bind="foreach: {data: links, afteradd: $root.fadein, afterremove: $root.fadeout}">     <li>         <select>             <option>homepege</option>             <option>facebook</option>         </select>         <input type="text" />         <button class="close" data-bind="click: $root.removelink">&times;</button>     </li> </ul> <a href="#" data-bind="click: addlink">add link</a> 

knockoutjs

function link(id, url) {     var self = this;     self.id = id;     self.url = url; }  function venuecreateviewmodel() {     var self = this;     self.links = ko.observablearray([new link("", "")]);     //self.linkslist = ko.observablearray(['homepage11','facebook']);     self.removelink = function (link) {         self.links.remove(link)     }     self.addlink = function () {         self.links.push(new link("", ""));     }      self.fadein = function (element, index, data) {         //$(element).fadein();         $(element).filter("li").delay(1000).fadein(1000);     }     self.fadeout = function (element, index, data) {         $(element).filter("li").delay(1000).fadeout(1000);     } } ko.applybindings(new venuecreateviewmodel()); 

1) see code data-bind="foreach: {data: links, afteradd: $root.fadein, afterremove: $root.fadeout}"

why 1 need point function name $root keyword ?

i point function name in binding way data-bind="foreach: {data : rows, beforeremove : elementfadeout, afteradd:elementfadein}" , works. tell me when refer or point function name $root keyword ?

2) have time seen people use $parent keyword. tell me difference between $root & $parent keyword ?

3) see code self.links = ko.observablearray([new link("", "")]); why push link object observable array can push string links observable array ?

4) use fadein & fadeout $(element).filter("li").delay(1000).fadeout(1000); why fadeout effect not working...any clue ?

here jsfiddle link 1 can see , run full code http://jsfiddle.net/mfrsousa/2gt4k/3/

thanks

edit

i have couple of question based on jsfiddle link supplied @super cool

1) why refer firstname property name in binding

<span data-bind="text:$data.firstname"> 

see below code , way bind. here u can see did not mention property name first name or last name

<div id="dash" data-bind="foreach: {data : rows, beforeremove : elementfadeout, afteradd:elementfadein}">         <div data-bind="text:$data"> </div> 

so please tell me why mention property name in binding first name or last name ??

2) have seen jsfiddle link http://jsfiddle.net/supercool/2gt4k/27/ there have seen usage of $parent $root keyword usage not understand difference between these keywords $parent & $root keyword

from example seems both keywords $parent & $root keyword works same way. can tell me difference between ?

let me try .

1. $root refers root content of viewmodel $data represents same tend change based on view build .

2. $parent 1 step ahead of $data i.e if have multiple looping instances

vm:

    var mainloopmodel = function () {         var self = this; // root level scope         self.mainloop = ko.observablearray([{             'firstname': 'jhon'         }, {             'firstname': 'sam'         }]);         self.lastname = ko.observable('peters');     }      ko.applybindings(new mainloopmodel()); 

view:

   <div data-bind="foreach:mainloop">     $data value: <span data-bind="text:$data.firstname"></span>                    <span data-bind="text:$data.lastname"></span> --(1)     $parent value: <span data-bind="text:firstname"> </span>                     <span data-bind="text:$parent.lastname"></span>     $root value: <span data-bind="text:firstname"></span>                  <span data-bind="text:$root.lastname"></span>    </div> 

note: if remove $data before lastname in note (1) undefined error because mainloop dont have lastname , root model has lastname have access using parent or higher level

sample fiddle here

3. self.links = ko.observablearray([new link("", "")]); here assigning data rather pushing . yes can use normal strings should sacrifice 2-way binding , idea works if binding data view user cannot change .

4. a small mistake there should using beforeremove not afterremove . working demo here

refer docs here crystal clear understand.