绑定帆布使用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

回答

相关问题