JSFiddle - React, Tailwind, and code Playground

by vyshniakov

HTML

Data:
<ul data-bind="foreach: data">
    <li data-bind="text: name"></li>
</ul>

<br/>
Computed data:
<ul data-bind="foreach: computedData">
    <li data-bind="text: dataItem"></li>
</ul>

JavaScript

function Item(id, name) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
}

function ItemsViewModel() {
    var self = this;

    self.data = ko.observableArray([
        new Item(1, "One description"),
        new Item(2, "Two description"),
        new Item(3, "Three description")]);


    self.computedData = ko.computed(function() {
        return ko.utils.arrayMap(self.data(), function(item) {
            return { dataItem: item.name() + ' ' + item.id() };
        });
    });
}


ko.applyBindings(new ItemsViewModel());