綁定帆布使用Knockout.js

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.fillStyle = "#FF0000"; 
 
ctx.fillRect(10, 10, 100, 100); 
 
function ViewModel(){ 
 
\t \t \t  self = this; 
 
\t \t \t \t self.myCanvas = ko.observable(); 
 
}; 
 
var vm = new ViewModel(); 
 
ko.applyBindings(vm);

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000000;" data-bind="___:myCanvas"></canvas> 
 

 
Report 
 
<div data-bind="___:myCanvas"></div>

我使用knockout.js綁定視圖模型屬性的DOM到UI。現在，我的一部分GUI被渲染在一個畫布元素上。我使用JavaScript在畫布上繪製元素。我無法使用淘汰賽來綁定他們。

來源

2016-11-14 Devesh N.

如果你沒有alrea dy知道，它總是一個推薦的做法，提供一些你已經擁有的代碼，以便人們可以看到它並適當地引導你... – gkb

您可以創建一個custom binding幫助存儲到元素的引用時應用的數據綁定。

自定義綁定有一個init和update方法，它們都接收綁定HTMLElement作爲第一個參數。

下面是一個例子是：

定義自定義綁定，其存儲在所述視圖模型的可觀察到的
簽約了元件至元件的可觀察到的來執行繪製邏輯

ko.bindingHandlers.storeElement = { 
 
    init: function(element, valueAccessor) { 
 
    valueAccessor()(element); 
 
    } 
 
} 
 

 

 
function ViewModel() { 
 
    self = this; 
 
    self.myCanvas = ko.observable(); 
 

 
    self.myCanvas.subscribe(function initCanvas(element) { 
 
    var ctx = element.getContext("2d"); 
 
    ctx.fillStyle = "#FF0000"; 
 
    ctx.fillRect(10, 10, 100, 100); 
 

 
    }); 
 

 
}; 
 

 
var vm = new ViewModel(); 
 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000000;" data-bind="storeElement: myCanvas"></canvas> 
 

 
Report

來源

2016-11-14 09:31:34 user3297291

綁定帆布使用Knockout.js

回答

相關問題