Javascript 在鼠标悬停事件jCanvas上显示KnockoutJS中的指定数据

我遇到了另一个与KnockoutJS和jCanvas有关的问题。我的模型和视图模型：

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);

eventsModel=函数（）{
var self=这个；
self.events=ko.observearray（[]）；
}     
eventItemViewModel=函数（o）{
var self=这个；
self.BeginInMinutes=ko.可观察（o.BeginInMinutes）；
self.EventDuration=ko.可观察（o.EventDuration）；
自身类型=可观察的（o型）；
self.ReferenceNumber=ko.可观察（o.ReferenceNumber）；
self.FullDescription=ko.computed（函数（）{
var eventType=self.Type（）；
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）；
返回小时+'：'+分钟+“”+eventType+“”+self.EventDuration（）；
}，这个）；
};
var events=new eventsModel（）；
ko.应用绑定（事件）；

我想这应该足够了。基本上，我想在画布上显示这个完整的描述，但问题是它包含在一个数组中。在画布中，我有一些图形，所有属性都与画布中的矩形连接。我想做一些类似的事情：在jCanvas中矩形的mouseover事件上，我想显示完整的描述，例如在画布上方的纯文本中

我使用knockout data bind foreach等在表中显示一些信息，但现在我想显示整个集合中的这一特定信息。我试过了，但没用

我的画布：

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

也许我前面的问题有一些有价值的信息：

我确信这应该是从数组中只获取指定字段的简单方法

---

谢谢。

这实际上是非常简单的淘汰赛。您只需将画布放入一个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>

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

如您所见，在ObservalArray中遍历数据项的行为实际上将该项作为数据上下文附加到每个画布上，这样当您在其中一个渲染画布上执行某个事件时，它可以在处理程序函数中接收，并且您可以访问该特定项的所有属性和函数。在本例中，我将传递的项称为“selectedItem”

现在，就将jCanvas连接到画布标记而言，您可以使用foreach绑定的afterRender回调，它将在呈现项（我们现在可以忽略）和数据项本身中传递一个DOM元素数组。我们可以使用“attr”绑定获取该数据项的id，将其附加到画布，然后在itemRendered处理程序函数中以编程方式初始化每个单独的jCanvas

现在，您可以灵活地定义每个画布的渲染方式（形状、颜色等），这些都可以由每个单独项目中的数据驱动

下面是一个JSFIDLE来试用它：

---

另外，请参考“foreach”和“attr”绑定的淘汰文档。

但如果我想显示多个画布，基本上它可以工作，每个画布对应于数组中的每个元素。请注意，我的目标是有一个画布，其中有随机数目的矩形（从1-15），当鼠标位于其中一个矩形上时，我希望在画布上方显示有关它的描述。