проблем выколотки с парением

Question

я использую нокаут, чтобы связать некоторые данные. Что работает очень хорошо. Но теперь мне нужно связать некоторые данные, и когда пользователь передает указатель мыши, это должно отображать сообщение с некоторой информацией.

**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; 
} 

мой HTML для сообщения:

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>"; 
} 

связывают код расслоение плотной:

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

Привязки работают. Проблема в том, что сообщение не отображается. Если мы проведем тест без нокаута, появится сообщение.

Answer 1

Я не знаю, как это код всей модели, но вот рабочий пример кода сниппета. https://jsfiddle.net/kyr6w2x3/151/

вид:

<!-- 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>"; 
}