Question

我有一個html 5視圖，並且想要執行拖放操作。在我的html中，我有一個淘汰賽，如下所示。元素正在被拖動。

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

，這裏是與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')); 
      }; 
     } 
    } 

利用上述的setTransferProperties（事件）的JavaScript在另外，AppScope被尋找，替代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>