mip-listリストコンポーネント

mip-listリストコンポーネントは同期データをレンダリングすることも、データを非同期にリクエストした後にレンダリングすることもできます

例

基本的な使用法

<mip-list src="https://xxx">
    <template type="mip-mustache">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template>
</mip-list>

カスタマイズされたテンプレート

<mip-list template="mip-template-id" src="https://xxx">
    <template type="mip-mustache" id="mip-template-id">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template>
</mip-list>

同期データ

<mip-list synchronous-data>
    <script type="application/json">
        {
            "items": [
                {
                    "name": "lee",
                    "alias": "xialong"
                }, {
                    "name": "ruige",
                    "alias": "ruimm"
                }, {
                    "name": "langbo",
                    "alias": "bobo"
                }
            ]
        }
    </script>
    <template type="mip-mustache">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template>
</mip-list>

クリックロード詳細

<mip-list template="mip-template-id" src="http://xxx?" id="mip-list" has-more>
    <template type="mip-mustache" id="mip-template-id">
        <div>
            <li>{{key}}: {{value}}</li>
        </div>
    </template>
</mip-list>
<div class="mip-list-more" on="tap:mip-list.more"> 点击查看更多 </div>

属性

src

説明: 非同期リクエスト用のデータインターフェイス
必須オプション: いいえ
タイプ: String
値の範囲: httpsである必要があります
単位: なし
デフォルト値: なし

synchronous -data

説明: 同期データスイッチ属性を使用します
必須オプション: No
タイプ: String
値の範囲: None
単位: None
デフォルト値: None

id

説明: mip-list コンポーネント ID
必須オプション: No
Type: String
値の範囲: String
単位: なし
デフォルト値: なし

has-more

説明: クリックしてその他の機能を展開するかどうか
必須オプション: No
タイプ: String
値の範囲: なし
単位: なし
デフォルト値: なし

Notes

• 非同期リクエストのインターフェースは、コールバックを「callback」として標準化する必要があります
• has-more属性がある場合、mip-listタグが必須です id属性があり、ボタンをクリックする dom ノードが必要で、このノードには on 属性があります。その属性値は次のとおりです。tap: ミップリストの id.more です