JSFiddle - React, Tailwind, and code Playground

HTML

<a href='#' data-bind="click: sortData">Название <span data-bind="html: arrow"></span></a>
<ul data-bind="foreach: data">
    <li data-bind="text: $data"></li>
</ul>

JavaScript

var viewModel = function(){
    var arrows = {
            'asc' : '&#9650;'
        ,   'desc': '&#9660;'
        }
    ,   predicates = {
            'asc' : function(a, b){ return (a>b) - (b>a) }
        ,   'desc': function(a, b){ return (a<b) - (b<a) }
        }
    ,   flag = false
    ,   self = this
    this.data = ko.observableArray([1,-6,11,3,9,7])
    this.arrow = ko.observable(arrows['asc'])
    this.sortData = function(){
        flag = !flag
        self.data.sort(predicates[flag ? 'asc' : 'desc'])
        self.arrow(arrows[flag ? 'asc' : 'desc'])
    }   
}
ko.applyBindings(new viewModel)