Sortable and Template

[thomas....@gmail.com]

hey i'm trying to combine a sortable list and variable templates. I can get 1 of them to work but never together.

 <div class="container" data-bind="template: { name: getTemplate, foreach:items}, sortable:items">

       
    </div>

How do I code the data-binds so it makes a sortable list of the items witch can have individual templates?

[rpn]

Hello-

You can use the sortable binding like this for your scenario:

 <div class="container" data-bind="sortable: { template: getTemplate, data: items }>

Hope that helps!

-Ryan

[Thomas Bombeke]

it works but with a bug. If I drag the bottom item upwards in the list it duplicates that item again at the bottom of the list when I drop it

[rpn]

Can you put something in a jsfiddle that shows this issue?  Also, can you try removing any top-level whitespace from your template (should be like <script><div></div></script> with no line feed between script and div.  Recent versions of the plugin try to remove them for you, as they do cause issues with the sortable logic.

Thanks!

[Thomas Bombeke]

can't seem to make it work in fiddler, even though I copy pasted everything. This is the code I am using though if it's helpfull http://jsfiddle.net/thomasbombeke/rcLrg7eq/1/

[Gunnar Liljas]

You have Razor code in the JS and must also include JQuery UI

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[rpn]

Hi Thomas-

Can you tell me what version of knockout-sortable that you are using in your project?  If you are using an older version, then for your templates make sure that you strip the whitespace/linefeeds between the "script" tags and the actual elements. So, each template should look something like:

<script id="AfbeeldingBlok" type="text/html"><div class="portlet Blok">
            <div class="portlet-header">
                <h3><span data-bind="text: Naam"></span></h3>
            </div>
            <div class="portlet-content">
                <p>
                    <input data-bind="value: Tekst" />
                </p>
            </div>
        </div></script>

[Thomas Bombeke]

I'm using 0.11.0.  I've deleted the razor code in the fiddler so now the adding of the components work but the drag and drop does'nt

[Thomas Bombeke]

Ok is using the wrong jquery version, now it does exactly what it does in my local host http://jsfiddle.net/thomasbombeke/rcLrg7eq/4/

[rpn]

Thanks for the fiddle. I do see that there is a bug in the logic that strips top-level text nodes from named templates, when using a function to get the name. 

Until that issue is resolved, the fix is to strip the extra line feeds yourself, like http://jsfiddle.net/rniemeyer/brpr9qrw/

Thanks-

Ryan