Knockout Probleme mit Hover

Question

Ich verwende Knockout, um einige Daten zu binden. Was funktioniert gut? Aber jetzt muss ich einige Daten binden, und wenn der Benutzer die Maus übergibt, sollte eine Nachricht mit einigen Informationen angezeigt werden.

**My CSS:** 

.message{ 
    display:none; 
    color:#000; 
    background:#999; 
    position:absolute; 
    top:10px; 
} 

.mo:hover .message{ 
    background-color: yellow !important; 
    display:block !important; 
    z-index:10; 
} 

meine html für Nachricht:

function getGrayStatus() { 
     return "<a href='#'>" + 
      "<span class='mo' style='background-color:gray; padding-left: 100%;'>" + 
      "<p class='message'><b>my message</b></p>" + 
      "</span>" + 
      "</a>"; 
} 

js binden Code:

main.sellers.push(
    { 
     sellerCode: "1", totalClientsInRoute: "45", visitedClientsInRoute : "32", 
     notVisitedClientsInRout: "2", clientsWithSaleInRoute: "1", 
     percentageOfClientsWithSalesInRoute: "15", visitsOutOfPointInRoute: "1", 
     totalClientsOutOfRoute: "11", clientsWithSaleOutOfRoute: "15", 
     sales: [{ sale: getRedStatus() }, { sale: getGreenStatus() }, { sale: getGrayStatus() }} 

Bind in html:

<div class="dashboard-sellers-table-sales"> 
    <div class="table-row" data-bind="foreach: sales"> 
     <div class="table-cell" data-bind="html: sale"></div> 
    </div> 
</div> 

Die Bindungen funktionieren. Das Problem ist, dass die Nachricht nicht angezeigt wird. Wenn wir einen Test ohne Knockout durchführen, wird die Nachricht angezeigt.

Answer 1

Ich weiß nicht, wie der Code Ihres gesamten Modells ist, aber hier ist ein funktionierendes Beispiel für Ihren Code-Schnipsel. https://jsfiddle.net/kyr6w2x3/151/

Ansicht:

<!-- ko foreach: ItemList --> 
    <div class="dashboard-sellers-table-sales"> 
     <div class="table-row" data-bind="foreach: sales"> 
      <div class="table-cell" data-bind="html: sale"></div> 
     </div> 
    </div> 
    <!-- /ko --> 

JS:

var MainViewModel = function(){ 
    var self = this; 
    self.ItemList = ko.observableArray([{ 
     sellerCode: "1", totalClientsInRoute: "45", visitedClientsInRoute : "32", 
     notVisitedClientsInRout: "2", clientsWithSaleInRoute: "1", 
     percentageOfClientsWithSalesInRoute: "15", visitsOutOfPointInRoute: "1", 
     totalClientsOutOfRoute: "11", clientsWithSaleOutOfRoute: "15", 
     sales: [{ sale: getRedStatus() }, { sale: getGreenStatus() }, { sale: getGrayStatus() }] 
    }]); 
} 

var ItemViewModel = function(data){ 
var self = this; 
    self.sellerCode = data.sellerCode; 
    self.totalClientsInRoute = data.totalClientsInRoute; 
    self.visitedClientsInRoute = data.visitedClientsInRoute; 
    self.notVisitedClientsInRout = data.notVisitedClientsInRout; 
    self.clientsWithSaleInRoute = data.clientsWithSaleInRoute; 
    self.percentageOfClientsWithSalesInRoute = data.percentageOfClientsWithSalesInRoute; 
    self.visitsOutOfPointInRoute = data.visitsOutOfPointInRoute; 
    self.totalClientsOutOfRoute = data.totalClientsOutOfRoute; 
    self.clientsWithSaleOutOfRoute = data.clientsWithSaleOutOfRoute; 
    self.sales = ko.observableArray([]); 
    self.sales($.map(data.sales, function (item) { 
     return new SalesItemViewModel(item); 
    })); 
} 

var SalesItemViewModel = function(data){ 
    var self = this; 
    self.sale = data.sale; 
} 
var viewModel = new MainViewModel(); 
ko.applyBindings(viewModel); 

function getGrayStatus() { 
     return "<a href='#'>" + 
      "<span class='mo' style='background-color:gray; padding-left: 100%;'>" + 
      "<p class='message'><b>my GRAY message</b></p>" + 
      "</span>" + 
      "</a>"; 
} 
function getRedStatus() { 
     return "<a href='#'>" + 
      "<span class='mo-red' style='background-color:red; padding-left: 100%;'>" + 
      "<p class='message'><b>my RED message</b></p>" + 
      "</span>" + 
      "</a>"; 
} 
function getGreenStatus() { 
     return "<a href='#'>" + 
      "<span class='mo-green' style='background-color:green; padding-left: 100%;'>" + 
      "<p class='message'><b>my GREEN message</b></p>" + 
      "</span>" + 
      "</a>"; 
}