Question

我有一个html 5视图，想要执行拖放操作。在我的html中，我有一个淘汰的foreach，如下所示。正在拖动 li 元素。

<ul class="games-list" data-bind="foreach: games">
    <li data-bind="text: name, attr: { 'data-dragdrop': id }" 
        ondragstart='setTransferProperties(event)' 
        draggable="true">
    </li>
</ul>

这是javascript knockout ViewModel

<script type="text/javascript">

    var AppScope = function () {

        ...//plain js object here

        //knockout js View Model
        function PlayersViewModel() {
            var self = this

            self.games = ko.observableArray([
                                            new Game({ id: 0, name: "Cricket" }),
                                            new Game({ id: 1, name: "Football" }),
                                            new Game({ id: 2, name: "Hockey" })
                                            ]);
            ...
            //Drag and Drop
            self.setTransferProperties = function (event) { //Not invoked
                event.dataTransfer.setData("Text", event.target.getAttribute('data-dragdrop'));
            };
        }
    }

如上所述，在AppScope中查找 setTransferProperties（event），而不是在knockout ViewModel内，因此找不到。

执行拖动时，调用挖掘ViewModel中定义的 setTransferProperties（event）的方法是什么。

Answer 1

您需要执行以下操作

<ul class="games-list" data-bind="foreach: games">
    <li data-bind="text: name, attr: { 
                        'data-dragdrop': id ,
                        'ondragstart':$parent.setTransferProperties
        }" 
        draggable="true">
    </li>
</ul>

调用在knockout js ViewModel中定义的函数

1 个答案: