Question

我使用梦幻般的knockout.js将ViewModel属性绑定到DOM。现在，我的部分GUI在canvas元素上呈现。我使用fabric.js在画布上绘制元素。由于这些元素不是dom的一部分（它们是围绕画布绘制方法的包装），我不能使用knockout来绑定它们。不过，我需要在ViewModel中跟踪它们的位置/颜色/标签。

我认为我可以为每个结构基元类型创建一个自定义绑定，然后像dom节点一样绑定它们。但是，自定义绑定需要DOM元素作为其第一个参数。其次，我不能（轻松地）以编程方式添加绑定。我需要能够这样做，因为我无法用HTML编写绑定。

我还在考虑这个问题，但我暂时陷入了困境。有什么想法吗？

Answer 1

自定义绑定在计算的observable中实现，因此可以跟踪依赖关系，并且可以再次触发update功能。

听起来对于您的功能，您可能需要考虑使用跟踪对象，访问依赖关系以及进行任何必要更新/ api调用的计算可观察对象。

到目前为止，我还没有使用过面料，但是在这里你可以定义一个视图模型来表示一个矩形并创建一个计算器，以便在任何值发生变化时不断更新结构对象。

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

var RectangleViewModel = function (canvas) {
  this.left = ko.observable(100);
  this.top = ko.observable(100);
  this.fill = ko.observable("red");
  this.width = ko.observable(100);
  this.height = ko.observable(100);

  this.rect = new fabric.Rect(this.getParams());
  canvas.add(this.rect);

  this.rectTracker = ko.computed(function () {
     this.rect.set(this.getParams());

     canvas.renderAll();      
  }, this);

};

RectangleViewModel.prototype.getParams = function () {
    return {
        left: +this.left(),
        top: +this.top(),
        fill: this.fill(),
        width: +this.width(),
        height: +this.height()
    };
};

var vm = new RectangleViewModel(canvas);

ko.applyBindings(vm);

另一个简短的想法，如果您希望将一些结构/画布调用保留在视图模型之外（我可能会）。您可以创建一个fabric绑定，其中包含要添加到画布的形状数组。您还将传递一个处理程序，该处理程序检索要传递给它的参数。然后绑定将创建形状，将其添加到画布，然后创建一个计算以更新变化时的形状。类似的东西：

ko.bindingHandlers.fabric = {
    init: function (element, valueAccessor) {
        var shapes = valueAccessor(),
            canvas = new fabric.Canvas(element);

        ko.utils.arrayForEach(shapes, function (shape) {
            //create the new shape and initialize it
            var newShape = new fabric[shape.type](shape.params());
            canvas.add(newShape);

            //track changes to the shape (dependencies accessed in the params() function
            ko.computed(function () {
                newShape.set(this.params());
                canvas.renderAll();
            }, shape, {
                disposeWhenNodeIsRemoved: element
            });

        });
    }
};

您可以将它放在如下的画布上：

<canvas data-bind="fabric: [ { type: 'Rect', params: rect.getParams }, { type: 'Rect', params: rect2.getParams } ]"></canvas>

此时，视图模型可以简化很多，只是表示矩形的数据。此处示例：http://jsfiddle.net/rniemeyer/G6MGm/

Answer 2

我的爱好项目中有一个类似的问题，http://simonlikesmaps.appspot.com ...我需要将一个路点数组绑定到地图上，我不能直接通过KO这样做，因为路径点隐藏在OpenLayers SVG层中。所以我在这种模式中使用了一个订阅函数：

首先，为你的元素提供你所显示的东西的视图模型;大致 -

ElementViewModel = function(data) {
    this.position = ko.observable(data.position)
    this.label = ko.observable(data.label)
    this.color = ko.observable(data.color)
}

其次，一个视图模型来保存这些东西的列表：

ElementListViewModel = function() {
    this.elements = ko.observableArray()
}

然后将一些逻辑从web服务加载到视图模型中，粗略地说：

var element_list = new ELementListViewModel()
ajax_success_function(ajax_result) {
   for (element in ajax_result) {
      element_list.elements.push(new ElementViewModel(element))
   }
}

听起来你会有点排序;目的是最终得到一个observableArray中的元素列表。然后你可以订阅它并做Fabric工作;在接下来的位中有很多伪代码！

ElementListViewModel = function() {
    this.elements = ko.observableArray()
    this.elements.subscribe(function(new_elements) {
        // Remove everything from Fabric
        Fabric.removeEverything() // <!-- pseudo code alert!
        for (element in new_elements) {
            Fabric.addThing(convertToFabric(element))
        }
    }, this);
}

这不是超级复杂的，但确实意味着每当您的数据发生变化，并且您的元素列表发生变化时，这些变化会立即通过KO调用订阅函数反映在您的画布中。＆＃39;同步＆＃39;在新的元素列表和画布上已有的内容之间相当粗糙：简单地销毁所有内容并重新呈现整个列表。对我而言，这对我来说没问题，但对你来说可能太贵了。

Answer 3

我有兴趣遇到这个问题，因为我一直在尝试将fabric.js对象与淘汰模型集成 - 我想我已经放心，没有一个明显的答案。这是展示我最新想法的示例： https://jsfiddle.net/whippet71/aky9af6t/ 它在DOM对象（文本框）和当前选定的画布对象之间具有双向数据绑定。

HTML：

<div>
    <canvas id="mycanvas" width="600" height="400"></canvas>
</div>

<div class="form form-inline">
    <div class="form-group">X: <input data-bind="textInput: x" class="form-control"></div>
    <div class="form-group">Y: <input data-bind="textInput: y" class="form-control"></div>
</div>

使用Javascript：

var jsonFromServer = [{"type":"rectangle","left":10,"top":100,"width":50,"height":50},{"type":"rectangle","left":85,"top":100,"width":50,"height":50},{"type":"circle","left":25,"top":250,"radius":50}];
var selectedObject;

var canvas = new fabric.Canvas('mycanvas');

for (var i=0; i<jsonFromServer.length; i++) {
    var thisShape = jsonFromServer[i];
    if (thisShape.type == 'rectangle') {
        var rect = new fabric.Rect({
            width: thisShape.width,
            height: thisShape.height,
            left: thisShape.left,
            top: thisShape.top,
            fill: 'blue'
        });
        canvas.add(rect);
    } else if (thisShape.type == 'circle') {
        var circle = new fabric.Circle({
            radius: thisShape.radius,
            left: thisShape.left,
            top: thisShape.top,
            fill: 'green'
        });
        canvas.add(circle);
    }
}
// Set first object as selected by default
selectedObject = canvas.getObjects()[0];
canvas.setActiveObject(selectedObject);


// A view model to represent the currently selected canvas object
function ShapeViewModel(initX, initY) {
    var self = this;

    self.x = ko.observable(initX);
    self.y = ko.observable(initY);
    // Create a computed observable which we subsribe to, to notice change in x or y position
    // Use deferred updates to avoid cyclic notifications
    self.position = ko.computed(function () {
        return { x: self.x(), y: self.y() };
    }).extend({ deferred: true });
}

var vm = new ShapeViewModel(selectedObject.left, selectedObject.top);
ko.applyBindings(vm);

// Function to update the knockout observable
function updateObservable(x, y) {
    vm.x(x);
    vm.y(y);
}

// Fabric event handler to detect when user moves an object on the canvas
var myHandler = function (evt) {
    selectedObject = evt.target;
    updateObservable(selectedObject.get('left'), selectedObject.get('top'));
}
// Bind the event handler to the canvas
// This does mean it will be triggered by ANY object on the canvas
canvas.on({ 'object:selected': myHandler, 'object:modified': myHandler }); 

// Make a manual subscription to the computed observable so that we can
// update the canvas if the user types in new co-ordinates
vm.position.subscribe(function (newPos) {
    console.log("new x=" + newPos.x + " new y=" + newPos.y);
    selectedObject.setLeft(+newPos.x); 
    selectedObject.setTop(+newPos.y);
    selectedObject.setCoords();
    canvas.renderAll();
    // Update server...
});

有几点需要注意：

我创建了一个ko.observable，并为了更新结构对象而手动订阅它
我设置了一个结构事件处理程序，用于在对象选择/修改时更新ko.observable。我没有必要绑定到当前所选对象以外的任何东西。
我不得不使用延迟更新来避免循环更新（结构更新ko，然后通知结构......）

我是淘汰赛的新手，所以欢迎任何意见/建议。

绑定到非DOM ui元素

3 个答案: