2017-06-09 6 views
0

私はMarkoJS技術に初心者です。 MarkoJSを介してカルーセル(slider with multiple items)コンポーネントを作成しようとしています。問題はMarkoJSにload external libraries(Jqueryなど)に直面している問題です。外部ライブラリをロードしてmarkoで使用する方法はありません。外部ライブラリ(滑らかな)を統合してMarkoJSに活用するには?

私がMarkoJSと統合しようとしていたライブラリは、jquery and slick (carousel)です。 MarkoJSに外部JS/Jqueryコードをロードする方法を私に示唆できれば幸いです。だから、私は簡単にDOMを操作することができます。

私が探していたものは、selectors in MarkoJSを使用してMarkoJSを通してDOM manipulationですか?

いくつかの可能性がすでに試みられて:

  • けれども、私はここで任意のライブラリを使用していません。私はCSSを使ってカルーセルスライダーを構築することができません。
  • 第2に、Marko自身を介してスライダを実装するロジックを構築しようとしました。しかし、DOM elementsを選択している間は、やはり難しい点があります。

答えて

0

既存のjQueryプラグインを使用することは、Markoにとってかなり簡単です。

import Slick from 'slick-carousel`; 

class { 
    onMount() { 
    this.slick = new Slick(this.el); 
    } 
} 

<div> 
    <div>your content</div> 
    <div>your content</div> 
    <div>your content</div> 
</div> 

をあなたはあなたが持っているようにしても必要があります:あなたはimportそれあなたのテンプレートにして、コンポーネントのルート要素にマウント上にそれを添付できるように滑らかな場合には、それは、npmで提供されていますブラウザへの依存関係を取得するためのモジュールバンドラが設定されています。以下は、Markoとwebpacklassoを使用した例です。既にバンドラが設定されているstarter projectを使用することもできます。

0

しかし、実際のjQueryを統合する必要がある場合は、それを行うには、いくつかの方法があります。

import $ from 'jquery' 

class { 
    onMount() { 
    $('.myElement', this.el).hide(); 
    } 
} 

<div> 
    <div.myElement></div> 
</div> 
関連する問題