I provide a custom track-by function that tracks a person based on Vm.shuffleCollections = shuffleCollections Vm.enemies = buildCollection( "Ella", "Erin", "Eva", "Ester", "Eveline" ) Vm.friends = buildCollection( "Fiona", "Fay", "Franny", "Francis", "Fifi" ) will track (via console.log()) when new DOM nodes are created. NOTE: Each LI element also has a directive that This is akin to the "track by" syntax in NG1. using directive object references (like the first ngFor loop identity function to help determine item equality rather than a custom trackBy: property which uses an In this demo, we have two different collections that are
Configure the app component definition. Var NodeLogger = require( "NodeLogger" ) implicitly required by other components. NOTE: Not all components have to be required here since they will be Defer bootstrapping until all of the components have been declared. Understanding "Object Identity" With ngFor Loops In Angular 2 Beta 3 This way, we can see if existing DOM elements are destroyed and re-created or simply moved to another location in the DOM tree.
TYPESCRIPT MAKE OBJECT AND LINK IT TO NGFOR UPDATE
In both cases, each item in the list also gets a logging directive - nodeLogger - that logs the creation and update of the DOM node. If you watch the video, you can see how adding and removing the "trackBy" micro-syntax changes the way the DOM (Document Object Model) elements are tracked.
I'm also using the new ngForTrackBy property that was added in Beta 3 to track objects in the second collection (the one that is using all new object references). In this way, we can see what role object references play in the tracking of an "object identity." In the second list, I'm creating both a new collection and a new object for each item in the list. In the first list, all I'm doing it creating a new collection but maintaining the same item objects. When the user clicks the shuffle link, both collections are reversed. To test the meaning of "object identity," I put together a demo with two lists and a "shuffle" link. The tracking function takes a few arguments, and the first one is an index of the element, next one is the actual object from the array. Run this demo in my JavaScript Demos project on GitHub.
0 kommentar(er)
