4

javascript と jquery で問題なく変更できますが、ノックアウトバインディングxlink:hrefで dom だけを変更しても機能しません。xlink:hrefattr

これは私のsvg定義です

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
<defs>
    <symbol id="icon-home" viewBox="0 0 32 32">
        <path class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
    </symbol>
</defs>

これを本体上部に挿入

icon次に、ビューモデルのhtmlとプロパティでノックアウトを使用します

<svg class="svg-icon">
    <use id="myuse" data-bind="attr: {'xlink:href': icon }"></use>
</svg>

次のレンダリングされた出力が得られるため、アイコンが正しく返されていると確信しています

<svg class="svg-icon">
    <use data-bind="attr: {'xlink:href': icon }" xlink:href="#icon-home"></use>
</svg>

これは正しいですが、何も表示されません。ノックアウトでこれに対する実用的な解決策を持っている人はいますか?

4

2 に答える 2

17

どうやら、SVGはDOM の変更時に更新されません。

したがって、基本的に必要なことは、SVG を削除し、フィールドを更新して、SVG マークアップを再度追加することです。

ifこれは、バインディングでエミュレートできます。

<!-- ko if: showSvg -->
<svg class="svg-icon">
    <use data-bind="attr: {'xlink:href': icon }"></use>
</svg>
<!-- /ko -->

にshowSvgなるとfalse、SVG は DOM から削除され、 になると再び追加されますtrue。

あなたがするだろう：

myModel.showSvg(false);
myModel.icon("whatever");
myModel.showSvg(true);

または、よりko に準拠している場合は、書き込み可能な計算を使用して、この動作をカプセル化します。

myModel.iconComp = ko.computed({
    read: myModel.icon,
    write: function (value) {
        myModel.showSvg(false);
        myModel.icon(value);
        myModel.showSvg(true);
    },
    owner: this
});

iconCompの代わりにマークアップで使用しますicon。

アップデート

わかりました、私が言ったことをすべて忘れてください...

最初に属性を定義すると機能します（最後のChromeとIEでテスト済み）：

<svg class="svg-icon">
    <use data-bind="attr:{ 'xlink:href': icon }" xlink:href=''></use>
    <!-- Add the attr you want to bind to, set it blank like this for example-->
</svg>

次に、通常のバインドを行います。

デモ

于 2014-07-28T15:15:12.070 に答える