0

I'm currently working on a dotvvmp draggablelist. I have an objects list, Tracks, which is a list of TrackResult objects. I want to be able to drag the tracks within the list and change their positions visually speaking. There must be something wrong in the way I implement it because I always have an error. I already searched everywhere how to do it but there are not a lot of examples.
Here is the TrackResult Class:

public class TrackResult
{
    [DataMember(Name = "uid")]
    public string Id { get; set; }

    [DataMember(Name = "name")]
    public string Name { get; set; }
}

Here is my Playlist.dotcontrol view

<div class="ui fluid list" style="margin:10px;height: 100%;overflow: scroll">
    <cc:DraggableList DataSource="{value: Tracks}"
                  AllowedOperations="Reorder"
                  class="task-list">
       {{value: Name}}
    </cc:DraggableList>
</div>

and here is my PlaylistVM.cs ViewModel:

public class PlaylistVM : DotvvmViewModelBase
{
    public List<TrackResult> Tracks { get; set; }

    public PlaylistVM()
    {
        XmlConfigurator.Configure();
        log.Info("Init PlaylistVM");
        Tracks = new List<TrackResult>();
    }
}

And here is my error:

knockout:75 Uncaught ReferenceError: Unable to process binding "with: function(){return PlaylistVM }"

Message: Unable to process binding "dotvvm_withControlProperties: function(){return {} }"

Message: Unable to process binding "dotvvm-businesspack-DraggableList: function(){return {'maxItemsCount':0,'groupName':''} }"

Message: Unable to process binding "text: function(){return Name }"

Message: Name is not defined
at text (eval at parseBindingsString (knockout:70), <anonymous>:3:57)
at update (knockout:102)
at function.a.N.l (knockout:75)
at Function.dd (knockout:53)
at Function.ed (knockout:53)
at Function.ea (knockout:52)
at Object.a.u.a.N (knockout:50)
at knockout:75
at Object.D (knockout:12)
at k (knockout:74)

Furthermore this error causes many problems on my view. Here is my view when I implement the draggableList:

with DraggableList

And here is the normal one (but without the DraggableList):

withoutDraggableList

What am I doing wrong? This the first time ever I post a question on stackoverflow so I hope I didn't forget anything. But if you are interested in helping me and something's missing, please let me know.

MarieF
  • 1
  • 1
  • I haven't worked with dotvvm before, so this is just a hunch. Instead of `{{value: Name}}` try `{{value: $root.Name}}` If it works, it's because DraggableList is similar to [foreach binding](http://knockoutjs.com/documentation/foreach-binding.html) – Ray Aug 09 '18 at 06:39
  • Thanks Ray but it doesn't fix my error. In DOTVVM the scope context variables is _root. But when I do _root.Name, I get this : DotVVM.Framework.Compilation.DotvvmCompilationException: The binding '{ValueBindingExpression: _root.Name}' is not valid! And the view page doesn't even appear. – MarieF Aug 09 '18 at 07:13
  • Which DraggableList control are you using? Is it this one? https://github.com/riganti/dotvvm-samples-weeklyplanner – Tomáš Herceg Aug 09 '18 at 07:51
  • Yes I'm using the same DraggableList control(i just don't use the ItemDropped event). I'm adding this control in DotvvmStartup.cs like that : config.Markup.AddCodeControls("cc", typeof(DraggableList)); DraggableList is implemented in DotVVM.BusinessPack.Controls. – MarieF Aug 09 '18 at 08:30
  • I'll try to reproduce the issue - I suspect two things that might cause the issue: 1. It seems that you are using DraggableList inside markup control - maybe there is some issue with that. 2. There are DataContract attributes which change property names during JSON serialization, so they cannot be seen on the client side. – Tomáš Herceg Aug 09 '18 at 12:08
  • Ok thanks. FYI you're right it's in a markup control yet but i also tried to put it directly in the main view home.dothtml and I have the same error( I just re-tried it ). Maybe I'm still doing it wrong but first the datacontract attributes you talked about, thx. – MarieF Aug 09 '18 at 13:09
  • I am still unable to reproduce the issue. Neither the `DataContract`, nor the markup control is the problem. Here is [my test project](https://www.tomasherceg.com/download/DragListSample.zip) with the control and your code. Can you try to compare it with your project and find, what is different? – Tomáš Herceg Aug 09 '18 at 18:13
  • Hello, thank you for the test project. I noticed that you're using .Net Core framework. I'm using .Net Framework 4.5.2. Can it be a problem? – MarieF Aug 10 '18 at 11:27

0 Answers0