配列
このガイドで学べること
このガイドでは、Noodlで配列を使用する方法について詳しく見ていきます。配列はNoodlのリストにとって基本であり、他の多くのことにも役立ちます。
Noodlには配列に関連する多くのノードがあります。アクセスと変更のためには以下のものがあります:
配列をマッピングとフィルタリングするためには、配列フィルタと配列マップがあります。
また、静的配列ノードの使用方法も学びます。これはアプリ内の静的リストデータを扱う際に非常に便利です。
概要
このガイドでは、以下のトピックを通して説明します:
- Noodlの配列とは何か
- 静的および動的に配列を作成する方法
- 配列からオブジェクトを追加および削除する方法
- 静的配列の使用方法
- リストとドロップダウンでの配列の使用方法
- 配列のフィルタリング方法
配列はNoodlで常に使用されます。したがって、多くのガイドで登場します。配列をリストとして表示する方法については、リストの基本ガイドを確認してみてください。また、バックエンドデータベースからデータをクエリするときにはデータが配列で返されるため、このガイドと併せてクラウドデータガイドをいくつか確認すると良いでしょう。
このガイドを読む前に、オブジェクトが何であるかの基本的な理解があると良いでしょう。これについてはこちらのガイドで説明されています。
Noodlの配列とは
Noodlの配列は、アイテムの順序付きリストです。オブジェクトまたは（配列がデータベースクエリの結果である場合）レコードです。Noodlの配列は配列ノードで表されます。
Noodlの配列はJavaScript配列と同じではありません。変換は簡単ですが、JavaScript配列関数を使用してNoodlの配列にアクセスすることはできません。代わりに、後でこのガイドで説明されるNoodl配列APIがあります。
配列のID
変数およびオブジェクトと同様に、配列はそのIDによって一意に識別されます。配列ノードまたは配列にオブジェクトを挿入などのノードを介して配列を参照する任意のノードは、IDを通じてそれを行います。
したがって、配列ノードのIDを別のノード、例えば配列からオブジェクトを削除に接続して、同じ配列を操作していることを確認するのが一般的です。IDが静的である場合は、ノードに直接IDを入力することもできます。
以下は、配列のIDを使用して配列をクリアノードが同じ配列に対して操作を行っていることを確認する3つの典型的なケースです。
最初のケースでは、配列ノードのIDが文字列ノード（または例えば変数）に格納され、それが異なるノードで配列を参照するために使用されます。
2番目のケースでは、配列ノードに直接IDが設定され、そのIDが配列をクリアノードを正しい配列に指すために使用されます。IDはプロパティパネルで設定されます。
最後のケースでは、下にある新しい配列を作成から生成されたIDが使用され、配列をクリアノードが正しいノードで操作を行うことを
確認しています。
配列のアイテム
配列のアイテムは、オブジェクトまたはレコードです。アイテムは複数の配列のメンバーになることができます。つまり、2つの異なる配列（つまり、異なるIDを持つ）がまったく同じアイテムを持つことができますが、それらはまだ異なる配列です。アイテムは配列内に一度しか存在できません。
配列ノードをノードキャンバス上でホバーすると、配列が現在持っているアイテムの数が表示されます。
配列ノードのアイテム入力にアイテムを簡単に割り当てることができます。これは、たとえばレコードをクエリを通じてデータベースからクエリを行うときや、配列フィルタや静的配列の結果を処理するときなどによく行われます。以下に3つの例を示します。
ほとんどの場合、アイテムを配列に割り当てるのは、それらを処理するため（おそらくいくつかのアイテムを追加または削除するため）または後で使用するために追跡するためです。
配列の作成
上記の例で見たように、配列を作成する主な方法は2つあります。
-
静的作成 - ノードグラフに配列ノードを単純に追加します。配列にIDを与えることができます（上記で議論されたように）または単に空白にしておくことができます。これは、配列に自動的にIDが割り当てられることを意味します。
-
動的作成 - 特定のイベント（例えばDid MountシグナルやClickシグナル）で新しい配列 を作成します。
配列に静的なIDを与え、配列ノードを含むコンポーネントの複数のインスタンス（たとえばいくつかのリストアイテム）がある場合、それらのコンポーネントすべてで同じ配列が参照されます。これが望んでいることかどうかに注意してください。
レシピアプリの作成
それでは、配列を使って遊んでみましょう。小さなレシピアプリを作成しましょう。全体的なアイデアは、レシピのリスト（配列に保存される）を持ち、各レシピにはいくつかの材料も配列に保存されるというものです。最終的には、配列の中に配列を持つことになります。
サンプルデータから始めましょう ！新しいプロジェクトを作成し、「Hello World」テンプレートを使用してください。次に、静的配列ノードを作成します。JSON形式に設定されていることを確認してください。
次に、以下の内容をJSONデータにコピー＆ペーストしてください。
[
{
"name": "スウェーデンのパンケーキ",
"description": "クラシックなスウェーデンのパンケーキのシンプルで美味しいレシピ（8-10個分）",
"containsMeat": false,
"ingredients": [
{ "amount": "150 g", "name": "小麦粉" },
{ "amount": "1/2 tsp", "name": "塩" },
{ "amount": "3", "name": "卵" },
{ "amount": "600 g", "name": "牛乳" },
{ "amount": "1 tbsp", "name": "バター" }
],
"instructions": "小麦粉、塩、牛乳、卵をよく混ぜ合わせます。中火でバターを使って薄いパンケーキを焼き、各面3-4分焼きます"
},
{
"name": "スウェーデンのミートボール",
"description": "スウェーデンの定番。ジャガイモ、グレイビーソース、リンゴンベリーと一緒に食べます。",
"containsMeat": true,
"ingredients": [
{ "amount": "500 g", "name": " ひき肉" },
{ "amount": "1", "name": "卵" },
{ "amount": "1片", "name": "ニンニク" },
{ "amount": "3 tbsp", "name": "パン粉" },
{ "amount": "1/2", "name": "黄色い玉ねぎ" },
{
"amount": "2 tsp", "name": "濃縮ビーフストック" },
{ "amount": "2 tbsp", "name": "全脂肪のクリーム" },
{ "amount": "1 tsb", "name": "塩" },
{ "amount": "1/2 tbsp", "name": "挽いたコショウ" },
{ "amount": "2 tbsp", "name": "バター" }
],
"instructions": "玉ねぎを細かく刻みます。バケツに入れます。ニンニクをバケツに押し込みます。卵、パン粉、クリーム、ビーフストック、塩、コショウを加えて混ぜ合わせます。10分間休ませます。ひき肉を混ぜ合わせます。小さなボールを作り、バターで金色になり、中まで火が通るまで焼きます。"
},
{
"name": "カロプス",
"description": "このスウェーデンのシチューは、ジャガイモとピクルス赤ビーツと一緒に食べるべきです。",
"containsMeat": true,
"ingredients": [
{ "amount": "1 kg", "name": "骨なしビーフ" },
{ "amount": "2 tbsp", "name": "バター" },
{ "amount": "2", "name": "黄色い玉ねぎ" },
{ "amount": "4", "name": "ニンジン" },
{ "amount": "3", "name": "ローリエ" },
{ "amount": "30", "name": "オールスパイス粒" },
{ "amount": "1リットル", "name": "水" },
{ "amount": "2 tbsp", "name": "濃縮ビーフストック" },
{ "amount": "1 1/2 tbsp", "name": "コーンスターチ" },
{ "amount": "1 tsb", "name": "塩" },
{ "amount": "1/2 tbsp", "name": "挽いたコショウ" }
],
"instructions": "肉を3x3 cmのピースに切ります。玉ねぎとニンジンを皮をむき、3cmのピースに切ります。肉をバターで表面がきれいになるまでフライパンで焼きます。玉ねぎ、ニンジン、ローリエ、オールスパイスを加えます。水とビーフストックを注ぎます。沸騰させ、 肉が柔らかくなるまで煮ます（肉によって2-3時間）。コーンスターチでシチューをとろみをつけます。塩とコショウを加えます。"
}
]
これで遊ぶためのデータができました。まず、それを見てみましょう。外側のリスト（レシピ）と内側のリスト（特定のレシピ）の両方を見てみましょう。まずはそれを確認するために、静的配列からアイテムを配列フィルタノードに接続します。次に、配列フィルタの最初のアイテムIDをオブジェクトノードに接続します。ingredientsというプロパティをオブジェクトノードに追加し、それを配列ノードに接続します。また、デバッグポップアップを開いて、何が起こっているかを確認します。
**
配列**内の最初のアイテムをフィルタリングする
何が起こっているのかをもう少し説明します。静的配列からのアイテムを配列フィルタノードに渡します。フィルタは実際にはフィルタが有効になっていませんが、配列フィルタの最初のアイテムID出力を利用できます。これは、配列内の最初のオブジェクト（パンケーキレシピ）のIDを保持します。そのオブジェクトでingredientsプロパティを見ると、配列のアイテムが含まれています。これらのアイテムは、別の配列のアイテムとして設定され、この配列にはパンケーキレシピの材料が含まれるようになります。
それでは、レシピの周りにいくつかのシンプルなUIを作成しましょう。アプリをもう少し操作しやすくするために、シンプルなナビゲーションシステムが必要です。ナビゲーションの方法については、このガイドで詳しく学ぶことができます。このガイドでは詳細には触れません。
配列を表示するリストを作成する
まず、ルートコンポーネントにページルーターを追加します。また、テキストノードを削除してください。
ページルーターをクリックし、レシピリストという新しいページを追加します。
これで、コンポーネントツリーに新しいページコンポーネントが追加されます。
別のコンポーネントを作成します。今回はレシピリストアイテムと呼ばれるビジュアルコンポーネントです。これは、まもなく構築するリストのリストアイテムになります。
このコンポーネントで、リストアイテムのサイズを幅100%、高さ30pxに設定します。また、ルートグループにテキストノードを追加します。テキストを垂直方向に中央揃えにし、左揃えにします。
新しく作成したレシピリストページに戻ります。タイトル用のテキストノードを追 加します。フォントサイズを24pxに増やしてみましょう。ページに少し余白をつけるために、上方向と左方向に10pxのパディングを追加します。
タイトルテキストノードの下にリピータノードを追加します。新しく作成したレシピリストアイテムをテンプレートとして使用していることを確認してください。
次に、（例えばカット＆ペーストを使用して）Appからレシピリストページに静的配列ノードを移動し、アイテム出力をリピータに接続します。
リストが動作するようにするための最後のステップは、オブジェクト内の正しいデータポイントをリストアイテムのテキストに接続することです。レシピリストアイテムに戻り、新しいオブジェクトノードを追加します。Idがリピータから来るようにしてください。
次に、nameというプロパティをオブジェクトに追加し、それをテキストノードに接続します。
このシンプルなリストで今は十分です。リストの作成方法についてもっと学びたい場合は、リストの基本から始めることをお勧めします。
配列からオブジェクトを削除する
それでは、リストにいくつかの機能を追加しましょう。レシピを削除できるようにしましょう。削除ボタンをリスト
アイテムに追加し始めます。レシピリストアイテムコンポーネントに戻ります。
ルートグループのレイアウトを水平に変更します。次に、ルートテキストノードの兄弟として新しいグループを追加し、そのグループノードにアイコンノードを追加します。削除用の良いアイコンを見つけ、それがきちんと見えるように黒にしてください。また、新しく追加されたグループノードのサイズをコンテンツの幅と高さに変更します。サイズ、マージン、パディングを調整して、見栄えが良くなるようにします。
リストアイテムにホバーしたときにのみ削除ボタンが表示されるようにしたいです。これを実現する ために、スイッチを追加し、それをホバースタートとホバーエンドに接続し、その状態を内部グループのマウント入力にフィードします。以下を参照してください。
最後に、ユーザーが削除アイコンをクリックしたときにリストの外にシグナルを送信する必要があります。そのために、コンポーネント出力ノードを追加します。削除要求という入力を作成し、内部グループのクリックシグナルをそれに接続します。
これで、リストを含むコンポーネントで削除を処理する準備が整いました。レシピリストページコンポーネントに戻りましょう。このコンポーネントには、レシピアイテムを保持する配列を追加する必要があります。以前は、静的配列から直接アイテムを供給していました。今回は、内容を変更する必要があるため、最初にアイテムを配列に供給する必要があります。新しい配列にレシピリストという名前を付けましょう。ノードの構造は以下のようになります。
これで削除を行う準備が整いました。配列からオブジェクトを削除ノードを作成します。このノードは2つの入力を取ります。追加する配列のIDと追加するオブジェクトのIDです。配列のIDは、作成したばかりの配列（レシピリスト）と同じなので、2つのIDを接続しましょう。オブジェクトを削除するIDはリピータから来ます。クリックされたオブジェクトのIDは、リピータによって転送されます。また、レシピリストアイテムコンポーネントからの出力は、リピータからのシグナルとして出力され、配列からオブジェクトを削除ノードの実行シグナルに接続することで、削除をトリガーするシグナルとして使用できます。
試してみてください！レシピを削除することを恐れないでください。ビューアを更新すると、すべてが静的配列から来ているため、すべてが戻ります。
カウントの使用
すべてのレシピを削除した場合、レシピリストが空ですというテキストを表示すると良いでしょう。それを構 築しましょう！レシピリストページに新しいテキストノードを追加します。テキストを中央揃えにします（テキストアライメントプロパティを使用します）。
このテキストは、配列が空の場合にのみ表示されるようにしたいです。そのために、式ノードを追加します。以下の式を式ノードに入力します。
count === 0
これにより、入力countが0に等しい場合、式はtrueを返し、それ以外の場合はfalseを返します。式の出力結果を新しいテキストノードのマウント入力に接続します 。最後に、配列のカウント出力を式のcount入力に接続します。
すべてのレシピを削除して、カウントが0に等しい場合にテキストが表示されることを確認してください。
レシピを表示する
それでは、レシピをクリックしたときにレシピを表示する時が来ました。それでは、別のページを追加してみましょう。前と同じように、ページルーターをクリックし、次にページを追加をクリックします。新しいページの名前をレシピとします。
新しいページを開き、タイトルテキストを追加します。レシピリストページからタイトルテキストノードをコピー＆ペーストし、タイトルを新しいレシピに変更できます。その下に別のテキストノードを追加します。これは説明を保持します。それも追加しましょう。
レシピをページに渡す
クリックしたレシピのIDを新しいページに渡して、それを表示できるようにする必要があります。ステップ1は、レシピをクリックしたときにキャッチすることです。これまでのところ、削除ボタンをクリックした場合のみをキャッチしています。レシピリストアイテムに戻り、コンポーネント出力に表示要求という出力を追加します。ルートテキストノードのクリック出力をそれに接続します。これにより、リストを含むコンポーネントにシグナルが転送されます。
次に、新しいページへ戻ります。ページ入力コンポーネントで新しいパスパラメーターを追加します。ページ入力ノードをクリックし、RecipeIdという新しいパスパラメーターを追加します。これにより、クリックしたレシピのIDをナビゲートするURLパスの一部として送信できます。
このIDがこのパスパラメーターであると仮定すると、オブジェクトをそれに接続して、名前、説明、その他のプロパティをオブジェクトから取得できます。レシピページでそれを設定しましょう。
これで、ナビゲーションを実装する準備が整いました。レシピリストページに新しいNavigateノードを追加して、レシピページに移動します。
Noodlビューアには戻るボタンがないので、ブラウザを使用するか、単にリフレッシュしてリストに戻る必要があります。それは少し面倒ですが、後で修正します。まず、材料を表示しましょう。
レシピの材料を表示する
それでは、材料を表示するリストを構築しましょう。Ingredient List Itemという名前の新しいリストアイテム、ビジュアルコンポーネントを作成します。以前のリストアイテムを複製して変更することができます。
表示要求入力をコンポーネント出力から削除して始めます。個々の材料を表示する予定はないためです。また、削除アクションとホバー状態を削除します。データを見ると、材料にはname（すでに接続している）とamountの2つのプロパティがあることがわかります。それに対してテキストノードを追加し、接続しましょう。
これで、材料を表示するリピータノードを追加する準備ができました。レシピページに移動します。リピータノードを追加し、新しく作成したIngredient List Itemをコンポーネントテンプレートとして選択します。これで、材料のリストを見つける必要があります。データモデルを見ると、プロパティはingredientsと呼ばれていることがわかります。オブジェクトにそのプロパティを追加し、配列ノードを追加します。それが材料を保持する配列になります。オブジェクトのingredientsプロパティを配列に
接続し、そのアイテムをリピータに接続します。これで、材料のリストができました！
最後に、指示を最後に追加してビューを完成させましょう。もう一つテキストノードを下に追加します。それを指示と呼びます。次に、オブジェクトにinstructionsプロパティを追加し、それをテキストノードに接続します。リストから少し離して配置するために、いくらかのマージンを追加すると良いでしょう。
最後に、戻るボタンを追加しましょう。下部にボタンを追加し、そのボタンがレシピリストページに移動するナビゲートノードをトリガーするようにします。
配列でドロップダウンを使用する
レシピアプリの進捗状況が見えてきました。次に、野菜/非野菜オプションをフィルタリングするためのシンプルな機能を追加します。データモデルを思い出してみると、containsMeatというプロパティがtrueまたはfalseのどちらかであることがわかります。
レシピリストページに戻ります。ここに、all、meat、vegetarianの3つのオプションを持つドロップダウンを追加したいと思います。
ドロップダウンノードを読むと、オプションを図るために入力として配列からアイテムを取ることがわかります。配列は以下のタイプのアイテムを含む 必要があります：
{
"Label": "ラベル",
"Value": "値"
}
Labelはドロップダウンにテキストとして表示され、関連するアイテムが選択された場合にドロップダウンの出力になるValueです。
静的配列を使用してドロップダウンに簡単にフィードできます。
レシピリストページに静的配列を追加し、JSON形式に設定されていることを確認します。明確にするために、それをドロップダウンオプションと名付け、以下のデータを追 加します。
[
{ "Label": "すべてのレシピを表示", "Value": "all" },
{ "Label": "肉を含むレシピを表示", "Value": "meat" },
{ "Label": "ベジタリアンのレシピを表示", "Value": "veg" }
]
次に、タイトルの直後にドロップダウンノードを追加し、labelを有効にして、ラベルにフィルタと記入します。また、リストアイテムと少し離すために、下マージンを追加します。静的配列からのアイテムをドロップダウンに接続すると、ドロップダウンにオプションが表示されるはずです。
配列をフィルタリングする
これで、レシピのフィルタリングを進めることができます。このケースでは、3つのフィルタリング状態があります：
- フィルタリングなし、つまりすべてのレシピを表示
- 肉を含むレシピのみを表示、つまり
containsMeat == true - ベジタリアンのレシピのみを表示、つまり
containsMeat == false
これらをステートノードでエンコードできます。ステートノードを追加します。それにフィルターステートという名前を付けます。次に、3つのステートを作成します。ドロップダウンのValueが与えるものと一致させるために、all、meat、vegと呼びます。ドロップダウンがステートノードを変更するために中間ロジックなしで設定できるようにするためです。
次に、ステートノードのために2つの値を作成します。1つはフィルター有効、もう1つはcontainsMeatと呼びます。両方ともブール値のタイプにします。これらの値を各ステートに割り当てます。
all-フィルター有効
はfalseに設定され、containsMeatはtrueまたはfalseのどちらかに設定できます（フィルタリングには影響しません）。
meat-フィルター有効はtrueに、containsMeatもtrueに設定します。veg-フィルター有効はtrueに、containsMeatはfalseに設定します。
これで、配列フィルタノードを追加する準備ができました。これは、静的配列とレシピを保持する配列の間に配置される必要があります。
containsMeatのための新しいフィルタを作成します。
フィルタをブール値タイプに設定します。これで、フィルタがcontainsMeat == falseまたはcontainsMeat == trueでフィルタリングするかどうかを入力を通じて制御できるようになりました。
そこで、静的配列からのアイテムを配列フィルタのアイテムに接続し、配列フィルタから配列に接続します。
これで、状態に応じてフィルタを制御する準備が整いました。まず、ドロップダウンの値を私たちの状態ノードに接続します。ドロップダウンを変更すると、ステートノードの状態が変更されます。次に、ステートノードの値を配列フィルタの入力、有効とcontainsMeatフィルタ値に接続します。
これで、レシピをフィルタリングできます。
新しいレシピの作成
シンプルなフォームを作成する
最後の機能として、新しいレシピを作成するオプションを追加します。これには2つのことが関係します：
- 新しいレシピを作成する、例えばレシピのデータ、名前や説明など
- 新しいレシピのために新しい配列を作成し、材料で満たす
この機能のためのUIをいくつか作成しましょう。
まず、レシピリストページの下部にボタンを追加します。新しいレシピを追加というラベルを付けます。それを中央に配置し、少しマージンを追加します。
このボタンをクリックすると、新しい情報を追加できる新しいページに移動する必要があります。そのページを作成しましょう。メインアプリでページルーターを見つけ、新しいページを追加をクリックします。新しいページの名前を新しいレシピとします。新しいページコンポーネントを開きます。レシピリストページからタイトルテキストノードをコピー＆ペーストし、タイトルを新しいレシピに変更します。
レシピリストページに新しいナビゲートノードを追加して、新しいページに移動できるようにします。
新しいフォームでは、新しいレシピに必要なデータを格納するためのコントロールが必要です。
containsMeat値を格納するためのチェックボックス- レシピの
nameを格納するためのテキスト入力 descriptionを格納するためのテキスト入力instructionsを格納するためのテキスト入力保存とキャンセルのための2つのボタン
これらのコントロールを新しいページに追加し、各コントロールが関連付けられているプロパティに対してラベルが適切に設定されていることを確認します。パディング、マージン、レイアウトを調整して見栄えを良くします。descriptionとinstructionsのテキスト入力をテキストエリアとして設定します。
データを接続する
データの観点から**
ページ**を見ると、以下のことを行う必要があります：
- 新しいページに入ったら、レシピデータを保持する新しいオブジェクトを作成する。
- オブジェクトを作成した後、材料を保持する新しい配列も作成する必要があります。ユーザーが
保存をクリックした後、この配列のアイテムをオブジェクトに格納します。 - ユーザーが
保存をクリックした場合、このオブジェクトをレシピを保持するメインの配列に新しいアイテムとして追加する必要があります。
動的に配列を作成する
これをページのDid Mountイベントに基づいて構成しましょう。
新しいオブジェクトを作成ノードを作成します。containsMeatプロパティを追加し、デフォルトでfalseに設定して、フィルタリングが機能するようにします。Did Mountで新しいオブジェクトを作成ノードをトリガーします。オブジェクトが作成されたら、材料の配列を作成する必要があります。ユーザーが保存をクリックしたときに、ingredients配列のアイテムをオブジェクトに格納します。
次に、オブジェクトを作成し、コントロール（チェックボックスとテキスト入力）をそれに関連付けられているプロパティに接続します。オブジェクトのプロパティを設定を使用していないのは、入力の変更があるたびにオブジェクトを更新したいからです。つまり、特定のタイミングではなく。
これがそのフローです。完了シグナルを使用して、 順番に事が起こるようにし、オブジェクトノードに新しく作成されたオブジェクトのIDを渡して、正しいオブジェクトに対して操作を行うようにします。
材料を配列に追加する
材料を追加するためのUIを追加しましょう。アイデアは、2つのテキスト入力（1つは量用、もう1つは材料の名前用）と、材料を追加するボタンを持つことです。また、追加するにつれて材料を表示するリピータも必要です。そのリピータは、以前作成したIngredient List Itemコンポーネントを再利用できます。もちろん、リピータは材料を保持する配列からアイテムを取得します。材料セクションのフォームをわかりやすくするために、材料セクションのタイトルとしてテキストも追加しましょう。
すべてのコンポーネントはIngredient Sectionというグループに入れて、複合体として簡単に扱えるようにします。
Adding Objects to an Array
Now we need to create a new Object (representing the ingredient) when the user clicks Add and then add that new Object to the Array of ingredients. We use the node Insert Object Into Array for the latter. It takes one Id for the Array to add to and one Id for the Object to add. We hook everything up as below.
Try adding a few ingredients. They should show up in the ingredient list.
Adding the new recipe to the Recipe Array
Finally, when the user presses Save we want to add the ingredients to the recipe and then add the new recipe to our main recipe Array - the one we create in the Recipe List Page that has an Id Recipe List.
First we store the Items of our ingredients in the ingredients property using the Set Object Properties. Then, once again we use the Insert Object Into Array node to save our recipe in the recipe list. This time we hardcode the Id to Recipe List and make sure our recipe Object is the object to add.
Another option would have been to store the Id of the Array instead of its items and then use the Id to identify the Array when showing the recipe. However, since the Static Array don't have an internal Array holding its ingredients, this would not work in this case. That's why we store the Items rather than the Id.
We also make sure the user navigates back to the Recipe List once the recipe is added. Same goes for if the user presses Cancel, but of course in that case, nothing is saved.
This is how that part is done.
A minor refactoring
We now expect our newly created recipes to be visible in the Recipe List. However, we can see that's not the case. It's the same old list. What's going on? The reason is that since the Recipe List Page is created as we nevigate, the items are overwritten with the items of our Static Array. See image below.
We also see that the filtering happens at the wrong place - we are only filtering what's coming out of the Static Array.
To solve this we need to move the assignments of items out, outside the Page (that is being re-created) to the main App that's not being recreated when a navigation happens. This is easy since the Array can easily be referred to globally through its Id.
We simply reorganize our Arrays and filters according to the following. We move the Static Array and assignment out to the App as below.
And we use the same Array (identified by the Id) and make sure to filter the items before we feed them into our Repeater
Try it out, now it should work!
