0

アプリケーションでノックアウト 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() は、作成時にのみ呼び出されます。

データが変更されたときにメソッドを再度呼び出すにはどうすればよいですか?ノックアウトによってそれらのメソッドを呼び出す他の方法はありますか?.

任意の提案をいただければ幸いです。

4

1 に答える 1

0

次のように、計算されたオブザーバブルを使用して回転を計算する必要があります (fiddle : 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());
于 2013-10-29T10:44:01.830 に答える