javascript - 当使用敲除在 svg 元素中动态更改数据时如何调用函数？

Question

我在我的应用程序中使用了 knockout-2.2.1.js，并且我也在使用 svg 元素。当数据更改时，我正在使用敲除来更新 svg 元素属性。

<rect  data-bind=\'attr: { transform : viewModel.data()>0? "rotate(180 {{html xValueConverter("x")}} {{html yValueConverter()}})" : "rotate(180 0 0)",  height: viewModel.data()<0 ? 0 :viewModel.data() }\' width="20" fill="#38ACEC"></rect>

在上面的代码中，敲除工作正常，height但不适用于属性transform。xValueConverter("x") 和 yValueConverter() 仅在创建时调用。

当数据更改时，我如何再次调用该方法，还有其他方法可以通过淘汰赛调用这些方法吗？

任何建议都应该不胜感激！

Answer 1

您应该使用计算的 observables 来计算旋转，如下所示（小提琴：http: //jsfiddle.net/6f4X3/6/）：

html:

height: <input type="text" data-bind="value:actualData, valueUpdate:'afterkeydown'" /><br />
rotationAngle: <input type="text" data-bind="value:rotationAngle, valueUpdate:'afterkeydown'" /><br />
rotationPointX: <input type="text" data-bind="value:rotationPointX, valueUpdate:'afterkeydown'" /><br />
rotationPointY: <input type="text" data-bind="value:rotationPointY, valueUpdate:'afterkeydown'" /><br />

<svg>
    <rect data-bind='attr:{ transform:rotation, height:data() < 0 ? 0 : data()}'
    width="20" x="70" y="40" fill="#38ACEC"></rect>
</svg>

js：

var VM = function(){
    var self = this;
    self.actualData = ko.observable(100);
    self.data = ko.computed(function(){
        return parseInt(self.actualData(), 10);
    }, self);

    self.rotationAngle = ko.observable(20);
    self.rotationPointX = ko.observable(10);
    self.rotationPointY = ko.observable(10);

    self.rotation = ko.computed(function(){
        if (self.data() <= 0) {
            return "rotate(180 0 0)";
        } else {
            var r = "rotate(" + self.rotationAngle() + " " + self.rotationPointX() + " " + self.rotationPointY() +")";
            console.log(r);
            return r;
        }
    }, self);
}

ko.applyBindings(new VM());