在mouseover事件jCanvas上显示来自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中的矩形鼠标事件中，我想显示fullDescription，例如在画布上方的纯文本中。

我使用敲除数据来显示表中的一些信息-绑定、前景等，但现在我想从整个集合中显示这一特定信息。我试过了，如果绑定，但它不起作用。

我的画布

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

也许我之前的问题有一些有价值的信息：Knockout observablearray of observables with arrayMap function

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

谢谢。

Answer 1

这实际上是非常简单的与Knockout。您只需将画布放入一个Knockout前端，然后所有常见的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中的数据项的行为实际上将该项作为数据上下文附加到每个画布上，以便当您在呈现的画布上进行某些事件时，它可以在处理程序函数中被接收，并且您可以访问该特定项的所有属性和函数。在本例中，我将传递的项称为"selectedItem“。

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

这给了你世界上所有的灵活性来定义每个画布将如何呈现(形状、颜色等)。所有这些都可以由每个项目中的数据驱动。

下面是一个JSFiddle来尝试它：

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

另外，参考Knockout文档中的"foreach“和"attr”绑定。