CODEWITHSUNDEEP
javascriptjqueryknockout.jsmappingjquery-ui-sortable
user2160375
user2160375

Reputation:

Knockout sortable - disseapring elements

When I use "sortable" inside "foreach" binding, moving elements make them disappear. What's more, array position is being updated!

<div id="main">
<div data-bind="foreach: tasks">
    <div class="item" data-bind="sortable: $data">
        <label data-bind="text: name"></label>
    </div>
</div>
</div>

Fiddle example.

Upvotes: 2

Views: 71

Answers (1)

alexmac
alexmac

Reputation: 19587

You have a lot of errors in your viewmodel.

html:

<div id="main">
    <div data-bind="foreach: tasks">
        <div class="item" data-bind="sortable: tasks">
            <label data-bind="text: name"></label>
        </div>
    </div>
</div>

viewmodel:

var Task = function(name) {
    this.name = name;
}

var InternalTasks = function(tasks) {
    this.tasks = ko.observableArray(tasks); 
}

var ViewModel = function() {
    var tasks1 = new InternalTasks([
        new Task("Get dog food"),
        new Task("Mow lawn"),
        new Task("Fix car"),
        new Task("Fix fence"),
        new Task("Walk dog"),
        new Task("Read book")
    ]);
    var tasks2 = new InternalTasks([
        new Task("aa"),
        new Task("bb"),
        new Task("cc"),
        new Task("dd"),
        new Task("ee"),
        new Task("ff")
    ]);
    this.tasks = ko.observableArray([tasks1, tasks2]);
};

ko.applyBindings(ko.mapping.fromJS(new ViewModel()));

Upvotes: 2

Related Questions