Let's examine the ProductsHandler function in the products.go source file found in the client/handlers directory:

func ProductsHandler(env *common.Env) isokit.Handler {
  return isokit.HandlerFunc(func(ctx context.Context) {

    productsChannel := make(chan []*models.Product)
    go FetchProducts(productsChannel)
    products := <-productsChannel
    templateData := &templatedata.Products{PageTitle: "Products", Products: products}
    env.TemplateSet.Render("products_content", &isokit.RenderParams{Data: templateData, Disposition: isokit.PlacementReplaceInnerContents, Element: env.PrimaryContent, PageTitle: templateData.PageTitle})
    InitializeProductsPage(env)
    env.Router.RegisterLinks("#primaryContent a")
  })
}

Recall that from the diagram depicted in Figure 5.2, that the client-side web application accesses the server-side functionality through the use of XHR calls to Rest API endpoints. Here, we create the productsChannel channel to retrieve a slice of the Product objects. We call the FetchProducts function, which will make the XHR call to the Rest API endpoint on the server that is responsible for retrieving the list of available products to display on the Products page. Notice that we call the FetchProducts function as a goroutine. We must do this to ensure that the XHR call does not block. We supply the productsChannel channel as the sole input argument to the FetchProducts function. We then retrieve the list of products over the productsChannel channel and assign it to the products variable.

We create a new template data object instance, templateData, and set the respective fields for the PageTitle and the Products field. After this, we call the Render method on the env.TemplateSet object, specifying that we want to render the products_content template. In the RenderParams object that we supply to the Render function, we set the Data field with the template data object, templateData. We set the Disposition field to isokit.PlacementReplaceInnerContents to specify that the disposition of the render should replace the inner HTML contents of the associated element. We set the Element field to be the primary content div container, where the main page content is rendered. We call the InitializeProductsEventHandlers function to set up the event handlers found in the products page. For the Products page, the only DOM element needing an event handler is the Add To Cart button, which we will cover in Chapter 6, Isomorphic Handoff.

As far as client-side routing is concerned, the last line of code in the ProductsHandler function is the most important line. When each product card is rendered by the template renderer, we need to intercept the links of each product item. We can tell the isokit router to intercept these links by providing a query selector that will target the links found in the primary content div container. We do this by calling the RegisterLinks method of the isokit router object and specifying that the query selector should be "#primaryContent a". This will ensure that all the links for the product items are intercepted, and that when we click on a product item, instead of performing a full page reload to get to the /product-detail/{productTitle} route, the client-side route handler for the product-detail route will kick in and service the request.