JSFiddle - React, Tailwind, and code Playground

by ingro

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="http://cloud.github.com/downloads/rniemeyer/knockout-sortable/knockout-sortable.min.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
Sortable:
<div class="container" data-bind="sortable: {data: posts, afterMove: changeTime} ">
    <div class="item">
        <span data-bind="text: time"></span>
        -
        <span data-bind="text: title"></span>
    </div>
</div>
<hr/>
<button id="save" data-bind="click: $root.update" class="btn btn-success">Save</button>
<div id="result"></div>

CSS

.item{

    display: block; 
    background: #C0C0C0; 
    margin-bottom: 5px;
    width: 200px;
}

.container {
    margin: 20px;
    padding: 5px;
    border: 1px solid black;
    width: 200px;        
}

JavaScript

var Post = function(time, title) {
    this.time = ko.observable(time);
    this.title = ko.observable(title);
};


function GridModel() {

    var self = this,
        posts = [
            {
            time: "07:00",
            title: "test#1"},
        {
            time: "08:00",
            title: "work#2"},
        {
            time: "09:00",
            title: "task#3"},
        {
            time: "10:00",
            title: "sleep#4"}
        ],
        postMapper = function(posts) {
            return ko.utils.arrayMap(posts, function(post) {
                return new Post(post.time, post.title);
            })
        };

    self.posts = ko.observableArray(postMapper(posts));
    self.times = ko.observableArray(["07:00", "08:00", "09:00", "10:00"]);
    self.selectedPost = ko.observable();
    self.clearPost = function(data, event) {
        if (data === self.selectedPost()) {
            self.selectedPost(null);
        }

        if (data.name() === "") {
            self.posts.remove(data);
        }
    };
    self.isPostSelected = function(post) {
        return post === self.selectedPost();
    };
    self.changeTime = function(arg) {
        var count = 0;
        ko.utils.arrayForEach(self.posts(), function(post) {
            post.time(self.times()[count]);
            count++;
        });
    };
    self.update = function() {
        var updatedPosts = 
        {
            "time": "17:00",
            "title": "test#11"
        }
        ;

        //ko.mapping.fromJS(postMapper(updatedPosts), {}, self.posts);

        var newElement = ko.mapping.fromJS(updatedPosts);
        
        //var unmapped = ko.mapping.toJS(newElement);
        
        self.posts.replace(self.posts()[0],newElement );
        
        var after = ko.toJSON(self.posts);
        $("#result").html(after);
    };
}

ko.bindingHandlers.visibleAndSelect = {
    update: function(element, valueAccessor) {
        ko.bindingHandlers.visible.update(element,...