JSFiddle - React, Tailwind, and code Playground

by brunomuller

HTML

<script src="https://rawgit.com/knockout/knockout/v3.2.0-beta/dist/knockout.debug.js"></script>
<tile-large params:"obj: 'str'"></tile-large>

JavaScript

ko.components.register('tile-large', {
    viewModel: function (params) {
        //this.obj = params.obj;
        console.log(params);
    },
    
    template: 'Type: <p data-bind="text: obj.type"></p>'
    //template: 'Type: <p>VAzio</p>'    
});


function vm() {
    var self = this;
	  // Welcome Tiles

    self._welcomeTiles = ko.observable([
        {
            type: 'bonus',
            icon: 'icon-cart',
            title: 'Clique para trocar suas moedas e ganhar bônus',
            text: 'Troque suas moedas por um vale-compras com validade de 3 meses para gastar nos Hipermercados da rede Zaffari & Bourbon!',
            color: 'main1',
            priority: 0
        },
        {
            type: 'cash',
            icon: 'icon-cash',
            title: 'Dinheiro',
            text: 'Clique aqui e troque suas moedas por um vale-compras que pode ser trocado por dinheiro nos caixas deste supermercado.',
            color: 'main2',
            priority: 1
            
        },
        {
            type: 'donation',
            icon: 'icon-heart',
            title: 'Doação',
            text: 'Clique e doe suas moedas para ajudar a instituição Casa dos órfãos da Lagoa da Conceição, toda a quantia é bem-vinda.',
            color: 'main1',
            priority: 2
        }
    ]);
    
}

var welcomeVM = new vm();
ko.applyBindings(welcomeVM);