Question

我在我的应用程序中使用knockout-2.2.1.js，我也使用svg元素。我正在使用knockout来更新数据时更新svg elements属性。

<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（）仅在创建时调用。

如何在数据更改时再次调用该方法，还有其他方法可以通过knockout调用这些方法吗？

任何建议都应该受到赞赏！

Answer 1

你应该使用计算的observable来计算旋转，就像这样（小提琴：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());

如何使用knockout在svg元素中动态数据更改时调用函数？

1 个答案: