mouseoverイベントで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のrectangleのmouseoverイベントで、私はfullDescriptionをキャンバスの上にプレーンテキストで表示したい。

knockout data-bind foreachなどを使ってテーブルに情報を表示していますが、今はコレクション全体からこの情報を表示したいと考えています。私はバインドしてみましたが、うまくいきませんでした。

マイキャンバス：

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

そしておそらく、私の前の質問には、いくつかの旅行の一番の情報を持っている：Knockout observablearray of observables with arrayMap function

私はそれを配列からのみ指定したフィールドを取得するための、いくつかの簡単な方法であることを確信しています。

ありがとうございます。

Answer 1

これは、実際にはKnockoutではかなり簡単です。ノックアウトforeachにキャンバスを置くだけで、普通のJavascriptイベントはノックアウトバインディング（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をフックアップする限り、foreachバインディングのafterRenderコールバックを使用できます。これは、レンダリングされたアイテムの配列を渡します（今は無視できます）。データ項目自体そのデータ項目のIDを "attr"バインディングを使用してキャンバスに添付し、itemRenderedハンドラ関数内の個々のjCanvasをプログラムで初期化することができます。

これで、各キャンバスのレンダリング方法（シェイプ、色など）をすべて柔軟に定義でき、個々のアイテム内のデータによってすべてが駆動されるようになりました。

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

をまた、 "foreachの" および "attrの" バインディングのノックアウトのドキュメントを参照します。ここでは

はJSFiddleはそれを試してみることです。