Delegation pattern
When we work with a big amount of data, normal event handling can impact the performance. There is a technique to improve the response time of the events.
When we link the event directly to the item, the browser creates an event for each item. However, we can delegate the event to other elements. Usually, this element can be the document or the parent of the element. In this case, we are going to delegate it to the document that is the event for adding or removing one unit from a product. The problem is that if we just define one event manager for all the products, how do we set the product we are managing? KnockoutJS gives us some useful methods to succeed in this, ko.dataFor
and ko.contextFor
.
We should update the
cart-item.html
file's add and remove buttons by adding theadd-unit
andremove-unit
classes respectively:<span class="input-group-addon"> <div class="btn-group-vertical"> <button class="btn btn-default btn-xs add-unit"> <i class...