在鼠标悬停事件中显示来自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” 绑定。