JSFiddle - React, Tailwind, and code Playground

by kwon

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<h1 data-bind="text: name()"></h1>
<ul data-bind="foreach: criterias">
    <li data-bind="text: lp, click: select_this">foo</li>
</ul>

<button data-bind="click: update_data">Update data</button>

SCSS

ul {
    list-style-type: circle;
    margin-left: 30px;
}

JavaScript

var sample_data = {
    id: 123,
    name: "Foo Bar",
    criterias: [
        {lp: "something long 1"},
        {lp: "something long 2"}
    ]
}
        
var sample_data_2 = {
    id: 123,
    name: "Superman",
    criterias: [
        {lp: "something long 3"},
        {lp: "something long 4"},
        {lp: "something long 5"},
        {lp: "something long 6"},
        {lp: "something long 7"}
    ]
}
        
var CriteriaModel = function(data) {
    ko.mapping.fromJS(data, {}, this);
    
    var self = this;
    
    self.select_this = function() {
        console.log("selecting...");
        console.log(self.lp());
    }
}
    
var SavedSearchModel = {
    'criterias': {
        create: function(options) {     
            //return ko.mapping.fromJS(options.data, CriteriaModel);
            return new CriteriaModel(options.data);
        }
    }
}
            
// when {criterias: []}, name does not bind afterwards
var SavedSearch = ko.mapping.fromJS({name: "", criterias: []}, SavedSearchModel);

SavedSearch.update_data = function(event) {
    console.log("updating...");
    ko.mapping.fromJS(sample_data_2, SavedSearchModel, SavedSearch);
}

ko.applyBindings(SavedSearch);
ko.mapping.fromJS(sample_data, SavedSearchModel, SavedSearch);