django-components v テンプレートは Vue または React と同等になりました

こんにちは、私は Juro です。ジャンゴ コンポーネントのメンテナの 1 人です。リリース v0.90 ～ 0.94 では、JSX / Vue と同様に、テンプレートでのコンポーネントの使用をより柔軟にする機能を追加しました。

(私は JS / CSS 変数、TypeScript と Sass、HTML フラグメントのサポートを追加するのに忙しいので、この情報はすでに少し古くなっています (1 か月前にリリースされました。最新は v0.101)。とても興味深い内容です。このアップデートをまだ共有していないことに気づきました!)

とにかく、以下は blog_post_props から適用されるタイトル、ID、および追加の kwargs を受け入れるコンポーネント blog_post です。

    {% blog_post
      title="{{ person.first_name }} {{ person.last_name }}"
      id="{% random_int 10 20 %}"
      ...blog_post_props
    / %}

上記は複数の機能の組み合わせです:

1.自己終了タグ:

の代わりに

    {% component "my_component" %}
    {% endcomponent %}

簡単に書​​くことができるようになりました

    {% component "my_component" / %}

2.複数行タグ:

django_components は、複数行のタグを許可するように Django を自動的に構成するようになりました。したがって、すべてを 1 行に詰め込むのではなく、次のようにします。

    {% component "blog_post" title="abcdef..." author="John Wick" date_published="2024-08-28" %}
    {% endcomponent %}

複数行にまたがることもできます:

    {% component "blog_post"
      title="abcdef..."
      author="John Wick"
      date_published="2024-08-28"
    / %}

3.スプレッド演算子:

JSX の ...props オペレーターまたは Vue の v-bind と同様に、これは props / kwargs を指定された位置に挿入します。

それでは代わりに

    {% component "blog_post"
      title="abcdef..."
      author="John Wick"
      date_published="2024-08-28"
    / %}

辞書に kwargs を入れて、それを適用できます。

    # Python
    props = {
        "title": "abcdef...",
        "author": "John Wick",
        "date_published": "2024-08-28"
    }

    {# Django #}
    {% component "blog_post" ...props %}

4.コンポーネント入力の文字列リテラル内のテンプレート タグ:

コンポーネント入力内でテンプレート タグとフィルターを使用できるようになりました:

    {% component 'blog_post'
      "As positional arg {# yay #}"
      title="{{ person.first_name }} {{ person.last_name }}"
      id="{% random_int 10 20 %}"
      readonly="{{ editable|not }}"
    / %}

これにより、値をフォーマットする必要があるたびに追加の変数を定義する必要がなくなります。

タグが 1 つだけで、その周囲に余分なテキストがない場合、結果は値として渡されることに注意してください。したがって、「{%random_int 10 20 %}」は数値を渡し、「{{ editable|not }}」はブール値を渡します。

さらに一歩進んで、Vue や React と同様のエクスペリエンスを得ることができます。そこでは、次のような任意のコード式を評価できます。

    <MyForm
      value={ isEnabled ? inputValue : null }
    />

これは、テンプレート内から Python 式を評価するために使用できる expr タグとフィルターを追加する django-expr を使用すると可能になります。

    {% component "my_form"
      value="{% expr 'input_value if is_enabled else None' %}"
    / %}

5. {% comp_name %} {% endcomp_name %} と TagFormatter

のサポート

デフォルトでは、コンポーネントはコンポーネントタグに続いてコンポーネントの名前を使用して記述されます。

    {% component "button" href="..." disabled %}
        Click me!
    {% endcomponent %}

これを変更できるようになりました (独自に作成することもできます!)。

たとえば、COMPONENTS.tag_formatter を「django_components.shorthand_component_formatter」に設定すると、次のようにコンポーネントを作成できます。

    {% button href="..." disabled %}
        Click me!
    {% endbutton %}

---

これからもたくさんの機能が登場するので、ぜひ django-components を試してみてください!

以上がdjango-components v テンプレートは Vue または React と同等になりましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。