knockout.js - DOTVVM：如何实现 DraggableList（不工作）

Question

我目前正在研究 dotvvmp 可拖动列表。我有一个对象列表 Tracks，它是 TrackResult 对象的列表。我希望能够在列表中拖动曲目并在视觉上改变它们的位置。我实现它的方式一定有问题，因为我总是有错误。我已经到处搜索如何做到这一点，但没有很多例子。
这是 TrackResult 类：

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

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

这是我的 Playlist.dotcontrol 视图

<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>

这是我的 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>();
    }
}

这是我的错误：

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)

此外，在我看来，这个错误会导致许多问题。这是我实现draggableList时的看法：

与 DraggableList

这是正常的（但没有 DraggableList）：

没有可拖动列表

我究竟做错了什么？这是我第一次在 stackoverflow 上发布问题，所以我希望我没有忘记任何事情。但是，如果您有兴趣帮助我并且缺少某些东西，请告诉我。

标签： knockout.jsdotvvm