Using a list inside a observableArray as source.

[nygter]

Greetings..

I'm struggling with this plugin to make it work when my structure looks like this : TeamSetup(ObservableArray) -> SubTeams(array?) --> Players(array?)

Easily explained... I'm creating x-number of drop-targets based on how many lists of players i find.. So there might be 4 subteams, which has 4 lists of Players i want to shuffle players around inside..

the problem is that the TeamSetup is an observableArray, and the sub-lists underneath is not..

So is there anyway to make this work ?

Terje.

[laurentlbm-rc]

We have not tested the code for a situation like this. Couldn't you just make your lists of players obervableArrays?

[nygter]

Yeah.. u're absolutely right Laurent :) Was just a bit "brainwashed" with no solution, and thought that this was something that absolutely should have been thought about...

Solved like this :

$.get(uri, function (data) { model.availablePlayers(data.AvailablePlayers); model.subTeams(data.SubTeams.map(function (t) { t.Players = ko.observableArray(t.Players); return t; })); }, 'json');

and now.. it works perfectly..

Thanx a bunch for this wrapper guys!.. It's awsome!

Only thing that actually is a bit annoying atm. is that if i drop/move all items from one dragula-container it's no "droppable" area left in the container to put something back inside :)

[laurentlbm-rc]

I'm glad you got it to work!

For your new problem, I think I've had the same issue before. Could it be that you only display the dragula-container if there are items in it?

[nygter]

Yeah :) That's right! Not sure how i can avoid that though.. you got any ideas ?

This is how i do it now :

<div class="player-card-container-mini" data-bind="dragula: { data: availablePlayers, group: 'playerz' } ">

Btw : Quite many of my co-workers were impressed about the flexibility of dragula and knockout, and especially handling dynamic-generated items well :) applause!

[laurentlbm-rc]

Is there an if around it that determines if the container is shown or not? Can you create a fiddle to show the problem?

I'm really happy that you like this plugin. I whipped it up quickly for work and didn't really think anyone else would ever use it.

[nygter]

Sure :)

Check this JSFiddle : [https://jsfiddle.net/b65qdquw/]

Can't get the solution to run atm, due to some knockout implementation of fullcalendar.io so i only had this screenshot of the datastructure :)

[laurentlbm-rc]

I updated your fiddle with the JS dependencies, some test data, and a "fix": https://jsfiddle.net/b65qdquw/1/

The problem was that when a player list is empty, the container became empty and had a height of 0. The drop area was essentially invisible, so you couldn't hover into it. What you can do is make sure it never has a height of 0. In the fiddle, I added the following CSS and it seems to work:

.player-card-container-mini {
  min-height: 10px;
}

[nygter]

Yaay.. that worked :) Thanx a bunch Laurent :+1: