問題タブ [riot.js]

2 つの異なる RiotControl ストアを使用して、2 つの類似した Riot コンポーネントでイベントをスコープする最良の方法は何ですか?

現在、コントロール ストアはグローバルであるため、どのボタンが押されても、アクションは両方のタグに適用されます。店舗ごとに 1 つのタグを適用する最善の方法を見つけようとしています。

私の実際のユースケースには複数のネストされたタグがあるため、Store を渡すのは理想的ではないかもしれません。

https://jsfiddle.net/Lsc3znng/に例を設定しました 。

私のタグ:

私の店：

それで、ガイドに従ってRiot JSを学んでいます。手順を説明する例を示します。そして、「this.update()」を追加して、riot js 変数を更新します。今、それは彼のために働いていますが、私にとってはそうではありません. 理由を教えてください。

これがコードです。

これはindex.htmlです

そして、これは私の contact-list.tag です

console.logs でデバッグした後、JSON ファイルからデータを正しく取得していることがわかります。連絡先リストのデータはそこにあります。しかし、箇条書きリストは更新されません。空っぽで表示されます。

このようなコンポーネントのマウント イベントでの dom 操作に jquery を使用しようとしています。

これにより、以下に示すエラーがスローされます

交換したら

と

これは完全に機能します。なぜこれが起こっているのですか？

以下にバージョンの詳細を示します

暴動バージョン:

暴動-cli: 2.3.14 - https://github.com/riot/cli

暴動コンパイラ: 2.3.22 - https://github.com/riot/compiler

アップデート

この問題は、これをthis.on('mount')に配置した場合にのみ発生します

this.on('all')に配置してみましたが、正常に動作します。

私は Riot.js でテストを行っており、私や別のプログラマーが github ユーザーまたは彼のリポジトリから情報をロードできるようにするタグを作成しています。

現在、ユーザーのタグは<github-user-widget></github-user-widget>で、リポジトリのタグは です<github-user-repos></github-user-repos>。

Riot.js では各タグに css スタイルを設定できることは知っていますが、場合によっては、すべてのタグに統一されたスタイルが必要になることがあります。すべてのタグに同じフォントを使用するか、グリッド システムを使用することがその例です。

Bootstrap や Bulma.io などの CSS ライブラリを index.html にロードすると、Riot タグを統一された方法でスタイルできますが、すべてのアプリケーションまたは Web サイトでこのライブラリを使用する必要があります。

このタグを、CSS 構成を変更することなく、この場合は Riot と Riot タグをインポートするだけで、他の人が自分のアプリケーションにインポートするだけのモジュールとして投稿できると想像しています。

私の質問は: CSS ライブラリを使用して、すべてのアプリケーションでその CSS ライブラリを使用することなく、すべての Riot タグまたはコンポーネントを統一された方法でスタイルする方法はありますか?

私はRiotJSを初めて使用します（昨日発見したばかりです）。ちょっとした実験を試みましたが、うまくいきませんでした。2 つのタグ ファイル (navbar.tag と dropdown.tag) を作成しました。それぞれは可能な限りシンプルで、ファイル名の h3 タグのみです。

私の index.html ページでは、次のように navbar タグ内にドロップダウン タグをネストしたいと考えています。

それはうまくいきません。Navbar は表示されますが、ドロップダウンは表示されません。2 つのタグを分離した場合にのみ、両方が機能します。つまり、次のようになります。

HTMLページ内にさまざまなタグをネストする方法を教えてください。それらを .tag ファイル内にネストできることは知っていますが、それは私がやりたいことではありません。私が欲しいのは、HTML ページで作成したカスタム タグをネストする柔軟性です (通常の HTML タグでできるように)。

何か案は？

ありがとう。

フロントエンド アプリのコンポーネント ベースのフレームワークを学習しようとしています。現在、RiotJS を使用していますが、同じ概念 (React、Angular 2.0 など) を使用するすべてのフレームワークに適用されます。

基本的な MVC フロントエンド フレームワーク (AngularJS など) では、コントローラーとルーターは互いに密接に接続されていました。しかし、コンポーネント ベースのフレームワークでは、ルーターとコントローラーの間の境界線がはるかに広くなります。そして、これが私を最も混乱させるものです。

私が構築しようとしているアプリの一例を次に示します。

ナビゲーション バー、コンテンツ エリア、サインイン フォームの 3 つの主要な UI 要素があります。そこで、my-navbar、my-content、my-signin という 3 つのコンポーネントを作成しました。コンポーネントごとに複数のルートを作成できました。たとえば、ルートが変更された場合、ナビゲーション バーはアクティブな「モジュール」を更新します。リスト アイテムのクラスを変更するだけなので、これを作成するのは簡単でした。

ここで、 内に他のタグをロードしたいと思います<my-content></my-content>。AngularJS では、常に (ui-router を使用して) ビューを完全に変更していました。コンポーネントベースのフレームワークでそれを達成するにはどうすればよいですか。my-content-users-list-view、my-content-users-detail-view という 2 つのコンポーネントがさらにあるとします。my-contentルートに基づいてコンポーネントに追加するにはどうすればよいですか? のように追加するだけdocument.innerHTML += '<my-content-users-list-view></my-content-users-list-view>ですか？

私の構文のほとんどが RiotJS であることは知っていますが、別のフレームワークの構文で記述していただければ理解できます。

ありがとうございました！

暴動で簡単なドロップダウン リストを作成しようとしています。問題は、ドロップダウンからタイトルと値が表示されないことです。私のコードは次のとおりです。