In many scenarios we need to display page children as a list. Usually the list is not just a static HTML. It has to support additional features like sorting, filtering or switching between different item layouts.
Articles list tree
To implement this we could use several techniques for example server side markup rendering. But calling server method to sort the collection is not always the best solution. Also implementing simple JavaScript functions for all client-side features could be difficult to maintain.
The elegant and efficient way of implementing advanced list could be using one of the client-side MVVM framework. There are many libraries like Angular, React, Knockout and others. Usually the problem is that most of the markup for the list will be rendered through Javascript. The robots could have problems when crawling the content. Duplicating all functionality for disabled JavaScript scenario is also problematic, because we have to support two parallel code versions.
I’ll try to show how to implement SEO friendly list using KnockouJs library.

Articles list preview

In this post I will describe how to implement the list of child articles with sorting by title functionality.
The Knockout ArticleListViewModel will has observable array of cards. Each card represents the child article with title, description, image and URL properties.

With this viewmodel we could initialize Knockout on a specific node in DOM.

By default Knockout use foreach binding to render array of items. To render the list of cards from the image above we could use:

After running the application, end user should see the list of articles. But if we view page source then there won’t be any articles included, just the knockout template.
Fortunately there is great knockout-pre-rendered extension for prerendering content. The library introduce new foreachInit and init bindings which are used on initial binding.

Now we will render cards list directly in MVC view using Razor foreach statement. Initially the model observableArray will be populated from View. It means that we don’t need to render collection of cards as serialized array.

The last missing element is the item template. It will be used during sorting, when the list is rendered by Knockout library.

Now after running the application we can see that content is available without executing JavaScript.

Articles view source