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。

我使用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中的数据项的行为实际上将该项作为数据上下文附加到每个画布，以便当您在其中一个渲染的画布上执行某个事件时，可以在处理程序功能，您可以访问该特定项目的所有属性和功能。在这种情况下，我调用了传递的项目“selectedItem”。

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

现在，您可以灵活地定义每个画布的呈现方式（形状，颜色等），并且可以全部由每个单独项目中的数据驱动。

这是一个试用它的JSFiddle：

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

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

在mouseover事件jCanvas上显示来自KnockoutJS的指定数据

1 个答案: