From a0727bd8ae2b45cd58cc46599d496abd606d69c0 Mon Sep 17 00:00:00 2001 From: taisei hatakeyama Date: Wed, 29 Jan 2020 21:55:58 +0900 Subject: [PATCH 1/2] Add Japanese translation for v-template --- content/docs/ja/utilities/v-template.md | 50 +++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 content/docs/ja/utilities/v-template.md diff --git a/content/docs/ja/utilities/v-template.md b/content/docs/ja/utilities/v-template.md new file mode 100644 index 00000000..2bd1a4d8 --- /dev/null +++ b/content/docs/ja/utilities/v-template.md @@ -0,0 +1,50 @@ +--- +title: v-template +contributors: [tai-hatake] +--- + +``は、再利用可能なテンプレートを定義できます。 + +## 基本的な使い方 + +``は、[ListView](/ja/docs/elements/components/list-view)コンポーネントのリスト項目の反復処理などに使われます。 + +## より高度な使い方 + +`v-template`は、1つ以上のテンプレートを必要とするカスタムコンポーネントを実装できます。 + +`v-template`は、テンプレート下に配置されても何もレンダリングしません。 +その代わり、親要素に`$templates`プロパティを追加します。 +この`$templates`プロパティは、[`TemplateBag`](https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/runtime/components/v-template.js#L36)インスタンスです。 + +次に、`v-template`は、親要素のそれぞれのTemplateBagインスタンスで利用可能なテンプレートとして登録されます。 +親要素の既存の`TemplateBag`インスタンスは、すべて再利用されます。 + +### `TemplateBag` クラス + +`TemplateBag`クラスは、複数のテンプレートを登録し、各テンプレートに提供されたアイテムと条件に基づいて正しいテンプレートを選択できます。 + +テンプレートは、[`KeyedTemplate`](https://docs.nativescript.org/api-reference/interfaces/_ui_core_view_.keyedtemplate)インターフェイスに準拠したオブジェクトとして保存されます。 + +### `selectorFn` プロパティ + +`selectorFn`プロパティは、単一のパラメータを持つ関数を返します。このパラメータは、テンプレートに選択されているアイテムです。 +`selectorFn`で返される関数は、`TemplateBag`インスタンスに登録されているすべてのテンプレートを確認し、if条件が満たされた最初のテンプレートを返します。一致するテンプレートがない場合、`default`を返します。 + +## Props + +| 名前 | 型 | 説明 | +|------|------|-------------| +| `if` | `String` | このテンプレートを使用する条件。 +| `name` | `String` | テンプレートの名称。省略時は自動生成されます。 + +## 利用可能なmethods + +| Method | 説明 | +|---|---| +| `registerTemplate(name: String, condition: String?, scopedFn: Function): void` | _内部関数_
`TemplateBag`インスタンスにテンプレートを登録します。
`scopedFn`は、[scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots)の描画関数である必要があります。 | +| `getConditionFn(condition: String): Function` | _内部関数._
指定された条件を評価する関数を作成します。| +| `getAvailable(): Array` | 利用可能な[`KeyedTemplates`](https://docs.nativescript.org/api-reference/interfaces/_ui_core_view_.keyedtemplate)の配列を返します。 (テンプレート名の配列を返します。) | +| `getKeyedTemplate(name: String): KeyedTemplate` | 指定された[`KeyedTemplate`](https://docs.nativescript.org/api-reference/interfaces/_ui_core_view_.keyedtemplate)を返します。 | +| `getKeyedTemplates(): Array` | `TemplateBag`に登録されているすべての[`KeyedTemplates`](https://docs.nativescript.org/api-reference/interfaces/_ui_core_view_.keyedtemplate)の配列を返します。 | +| `patchTemplate(name: String, context: any, oldVnode: VNode?): View` | 指定された`context`を使用して既存の[`VNode`](https://vuejs.org/v2/guide/render-function.html#The-Virtual-DOM)にパッチを適用します。`oldVnode`がない場合、指定されたテンプレートの新しいViewインスタンスを作成します。 | From 1ac972d8fe37d3addbe4004580b3905fdb9b431b Mon Sep 17 00:00:00 2001 From: taisei hatakeyama Date: Wed, 29 Jan 2020 22:04:26 +0900 Subject: [PATCH 2/2] Add Japanese translation for v-view --- content/docs/ja/utilities/v-view.md | 58 +++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 content/docs/ja/utilities/v-view.md diff --git a/content/docs/ja/utilities/v-view.md b/content/docs/ja/utilities/v-view.md new file mode 100644 index 00000000..b0655a65 --- /dev/null +++ b/content/docs/ja/utilities/v-view.md @@ -0,0 +1,58 @@ +--- +title: v-view +contributors: [tai-hatake] +--- + +`v-view`を使用すると、現在の`View`を親要素として設定できます。 + +--- + +```HTML + + + +``` + +```HTML + + + +``` + +--- + +### ``を使った例 + +``コンポーネントは、[Progress NativeScript UI](http://docs.telerik.com/devtools/nativescript-ui/Controls/Angular/SideDrawer/getting-started)パッケージの一つ。 + +`` コンポーネントは、`drawerContent`と`mainContent`を`View`インスタンスに設定する必要があります。 +`v-view`を使えば、数行のコードで記述できます。 + +#### `v-view`を使った場合 + +```HTML + + + + +``` + +#### `v-view`を使わなかった場合 + +`v-view`無しの場合、より冗長でエラーの発生しやすい記述が必要です。 + +```HTML + + + + +``` + +```JavaScript +{ + mounted() { + this.$refs.drawer.nativeView.drawerContent = this.$refs.drawerContent.nativeView + this.$refs.drawer.nativeView.mainContent = this.$refs.mainContent.nativeView + } +} +```