2

テンプレートにインライン SVG アイコンを挿入するテンプレート ヘルパーを作成しています。引数を渡して追加の CSS クラス (デフォルトのサイズ、色などを変更するために使用されます) を追加したいと考えています。

私が期待すること

<button> 
  <svg viewBox="0 0 78 73" class="svg-icon svgWhite" version="1.1" ...>
    <polygon id="icon-star" points="39 ... 60">
    </polygon>
  </svg>
</button>

私が得るもの

<button> 
  "[object Object]" 
  <svg viewBox="0 0 78 73" class="svg-icon" version="1.1" ...>
    <polygon id="icon-star" points="39 ... 60">
    </polygon>
    <!--[object Object]-->
  </svg>
</button>

マイ テンプレート

<template name="whatever">
  <button>{{{icon.star svgWhite}}}</button>
</template>

マイ テンプレート ヘルパー

Template.registerHelper('icon', {
  star:   function (userClass, userWrapper) {
    var wrapper = (userWrapper == undefined) ? "i" : userWrapper;
    var addlClass = (userClass == undefined) ? "" : ", " + userClass;
    var svgWidth = 78;
    var svgHeight = 73;

    var svgCode = '<polygon id="icon-star" points="39 .... 60"></polygon>';

    var icon = '<'+wrapper+'>' +
      '<svg viewBox="0 0 ' + svgWidth + ' ' + svgHeight + '" ' +
      'class="svg-icon' + addlClass + '" ' +
      svgConfig + '>' + svgCode + '</' + wrapper + '>';

    return icon
  }
});

参考：https ://github.com/meteor/meteor/tree/devel/packages/spacebars#helper-arguments

4

1 に答える 1

3

テンプレートヘルパーの登録が壊れているように見えます。複雑すぎる方法を使用して単純なことを達成しようとしていると思います。

トリプル ブラケット構文を使用し、JavaScript で HTML を記述し始めると、おそらく間違っていることがわかります。必要なことを実行するには、おそらくテンプレート インクルードを使用する必要があります。

まず、親テンプレートを定義します。これには、属性を使用して構成できる子テンプレートが含まれます (これらの属性は、子テンプレートのデータ コンテキストとして機能します)。

<template name="svgButton">
    <button type="button">
        {{> svgIcon class="svg-white"}}
    </button>
</template>

次に、子テンプレートを定義します。親テンプレートから渡された属性を使用できます。

<template name="svgIcon">
    <svg viewBox="0 0 {{width}} {{height}}" class="svg-icon {{class}}">
        {{! warning, polygon is a self closing tag like img}}
        <polygon id="icon-star" points="..." />
    </svg>
</template>

存在する場合はデータ コンテキストの値、またはデフォルト値のいずれかを取るヘルパーを定義できます。

Template.svgIcon.helpers({
  width:function(){
    return this.width || 78;
  },
  height:function(){
    return this.height || 73;
  }
});

したがって、高度なカスタマイズのために、このフォームを使用して子テンプレートを含めることができます。

{{> svgIcon class="svg-whatever" width="16" height="16"}}

編集 ：

20 以上のアイコン テンプレートがあるとどうなりますか。次に、反復可能な関数 (DRY ではない) を備えた 20 以上のテンプレート ヘルパーがありますか?

これは私が使用するアプローチです：

まず、すべてのアイコン svg コンテンツを異なるテンプレートとして定義します。

<template name="svgIconStarContent">
  <polygon id="icon-star" points="..."/>
</template>

{{! repeat 20 times...
    but this is DRY compliant because each time this is a different icon}}

次にUI.dynamic、パラメーター名に基づいて正しいテンプレートを含めるために使用できます。

https://www.discovermeteor.com/blog/blaze-dynamic-template-includes/

<template name="svgIcon">
    <svg viewBox="0 0 {{width}} {{height}}" class="svg-icon {{class}}">
        {{> UI.dynamic template=svgIconContent}}
    </svg>
</template>

最後に、親テンプレートで、動的に挿入するテンプレートの名前を渡すことができるため、異なる値で呼び出されたときにアイコンの内容が異なる場合があります。

{{> svgIcon svgIconContent="svgIconStarContent"}}
于 2014-09-29T17:30:29.020 に答える