javascript - 使用 Knockout.js 将 Canvas 绑定(bind)到 UI

Question

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 100, 100);
function ViewModel(){
			    self = this;
				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 将 ViewModel 属性绑定(bind)到 DOM。现在，我的 GUI 的一部分呈现在 Canvas 元素上。我使用 JavaScript 在 Canvas 上绘制元素。我无法使用 knockout 来绑定(bind)它们。

Answer 1

您可以创建一个 custom binding 在应用数据绑定(bind)时帮助存储对元素的引用。

自定义绑定(bind)具有 init 和 update 方法，这两个方法都接收绑定(bind)的 HTMLElement 作为第一个参数。

下面是一个示例:

• 定义一个自定义绑定(bind)，将元素存储在 View 模型的可观察对象中
• 订阅元素的可观察值以执行绘图逻辑

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