Just part of the code

Lists.html

<div class="list-content" data-bind="if: announcementList.rendered, visible: announcementList.listVisible">
    <div class="search-wrapper" data-bind="dxTextBox: { placeholder: 'Search', mode: 'search', value: announcementList.searchQuery, valueUpdateEvent: 'keyup' } "></div> 
    <!-- ko with: announcementList -->
    <div class="list-indentation" data-bind="dxList: {dataSource: dataSource, searchQuery: searchQuery}">
        <div data-options="dxTemplate : { name: 'item' } " >
            <div>
                <div class="course-icon-box">
                    <span data-bind="text: Course.substr(0, 1);"></span>
                </div>
                <div>
                    <div data-bind="text: Name" class="product-name"></div>
                    <div class="product-price"><strong data-bind="text: ArticleDate"></strong></div>
                </div>
            </div>
        </div>
    </div>
    <!-- /ko -->
</div>