
Velo 第31回 リピーターコンテナとコンテナボックス
Wix のコンテナには何種類かあるようです。
同じエディタで追加したエレメントでもリピーターに付属するコンテナはエレメント名が「コンテナ」で、コンテナボックスに付属するコンテナはエレメント名が「ボックス」です。
どちらも ContainableMixin という Mixin が装備されていて、エレメント上のオブジェクトを children とする親子関係を持っていますが、機能は違うようです。
以下のアニメーションをご覧下さい。

左のアニメーションはリピーターコンテナ上の画像を拡大していますが、拡大時にコンテナ外の部分はトリミングされています。
しかし右側のコンテナボックス上の画像の方はトリミングされません。
また、リピーター内のコンテナも表示されるエレメント名を見る限り、通常エディター、エディターX、Wixスタジオでそれぞれ違っているようです。
さて、上のアニメーションはマウスイベントハンドラーとしてコーディングしています。
以下のコードをご覧下さい。

リピーターとボックスではコードが違っています。
第17回で示しましたようにリピーターコンテナでは、 at( ) 関数でリピーター内のローカルセレクター $item( )獲得し、それを使って画像IDで個々の画像を特定しています。
リピータと言いながら一つの枠しか利用していませんが理屈上こういうコードになります。
一方コンテナボックスの方はグローバルセレクター $w( ) を使って画像IDで画像を特定しています。難しいものです。
Velo開発のご依頼はこちら