在鼠標懸停事件中顯示來自KnockoutJS的指定數據jCanvas

Question

我碰到與KnockoutJS和jCanvas有關的另一個問題。我的模型和ViewModel：

eventsModel = function() { 
      var self = this; 
      self.events = ko.observableArray([]); 
     }  
eventItemViewModel = function(o) { 
     var self = this; 
     self.BeginInMinutes = ko.observable(o.BeginInMinutes); 
     self.EventDuration = ko.observable(o.EventDuration); 
     self.Type = ko.observable(o.Type); 
     self.ReferenceNumber = ko.observable(o.ReferenceNumber); 
     self.FullDescription = ko.computed(function() { 
      var eventType = self.Type() == '0' ? 'Driving' : 'Resting'; 
      var hour = Math.floor(self.BeginInMinutes()/60); 
      var minutes = Math.floor(self.BeginInMinutes() % 60) < 10 ? '0' + Math.floor(self.BeginInMinutes() % 60) : Math.floor(self.BeginInMinutes() % 60); 
      return hour + ':' + minutes + " " + eventType + " " + self.EventDuration();  
     }, this); 
    }; 

    var events = new eventsModel(); 
    ko.applyBindings(events); 

我認爲這應該足夠了。基本上，我想在畫布上方顯示此FullDescription，但問題在於它包含在數組中。在畫布上，我有一些圖紙，並且所有的屬性都與畫布中的矩形連接。我想要做的事情是這樣的：在jCanvas中的矩形的mouseover事件我想在canvas上方以純文本形式顯示fullDescription。

我使用knockout data-bind foreach等顯示錶中的一些信息，但現在我想從整個集合中顯示這一個指定的信息。我試過，如果綁定，但它不工作。

我的畫布：

<canvas id="myCanvas" width="1000" height="300"></canvas> 

也許我剛纔的問題有一些信息居停：Knockout observablearray of observables with arrayMap function

我敢肯定，它應該是一些簡單的方法來獲得只有從數組指定的字段。

謝謝。

Answer 1

這實際上是Knockout非常簡單。您只需將您的畫布放在Knockout foreach中，然後所有常用的Javascript事件都可以作爲Knockout綁定（如mouseover）。一個簡單的例子是這樣的：

HTML：

<div data-bind="foreach: { data: items, afterRender: itemRendered}"> 
    <span data-bind="text: description"></span><br /> 
    <canvas data-bind="event: {mouseover: $parent.doSomething}, attr: { id: itemId }" style="background-color: blue"></canvas><br /> 
</div> 

的Javascript：

var MyViewModel = function() { 
    var self = this; 

    self.items = ko.observableArray(
     [ 
      { itemId: 1, description: "Item #1" }, 
      { itemId: 2, description: "Item #2" }, 
      { itemId: 3, description: "Item #3" } 
     ] 
    ); 

    self.doSomething = function (selectedItem) { 
     alert("You hovered over " + selectedItem.description); 
    }; 

    self.itemRendered = function (o, renderedItem) { 
     console.log("Initialize your jCanvas here for canvas id: MyCanvas" 
     + renderedItem.itemId); 
    }; 
}; 

正如你所看到的，通過在observableArray數據項目實際上附加迭代的行爲該項目作爲每個畫布的數據上下文，以便當您在其中一個渲染的畫布上執行某個事件時，可以在處理函數中接收該事件，並且您可以訪問所有p特定項目的性能和功能。在這種情況下，我調用了通過的項目「selectedItem」。

現在，就將jCanvas連接到您的canvas標籤，您可以使用foreach綁定的afterRender回調，它將在呈現的項目中傳遞DOM元素數組（我們現在可以忽略），以及數據項本身。我們可以使用「attr」綁定將該數據項的id附加到畫布上，然後以編程方式初始化itemRendered處理函數中的每個單獨的jCanvas。

現在，您可以在世界中靈活地定義每個畫布如何呈現（形狀，顏色等），並且可以由每個單獨項目中的數據驅動。

這裏是一個的jsfiddle嘗試一下：

https://jsfiddle.net/snydercoder/wkcqr76L/

而且，引用文檔淘汰賽爲 「的foreach」 和 「ATTR」 綁定。