0

私のWebアプリでは、コンテンツが異なる（つまり、テキストと評価が異なり、ボタンIDが異なる）同じブロック（テキスト、評価、ボタン）をいくつか作成する必要があります。そのために、私はjQueryテンプレートを使用しています。

同時に、評価には「Raty」jQueryプラグインを使用します。塗りつぶされた星と空の星の数として評価が表示され、テンプレートにデータが入力されたときに値を渡す必要があります。

ただし、テンプレート処理の時点で、対応するdivにプラグインを適用する方法が見つかりません。

これがコードです。

  1. テンプレート 
    <script id="clientTemplate" type="text/html">
    <span class="firstline" id="firstline_${id}">${firstline}
    <div class="star" id="s_${id}" style="cursor: pointer; width: 100px;"></div>
    {{if unescape( alert($data.importance)  )}}{{/if}}
    </span>
</script>
    //アラートは必要なデータにアクセスできることを確認するためだけにあります
  2. starこれは、 div に適用する必要があるものです。//値を下 の値 に置き換える必要があります
    $(".star").raty({
    half : true,
    score : 2.5,
    readOnly : false,
    click : function(score, evt) {
        if (readonly) {
            return false;
        }
        _id = $(this).attr("id");
        _id = id.replace("s", "");
        _id = _id.trim();
            $.ajax({
                url : "importancereceive.html",
                type : "POST",
                data : {
                id : _id,
                importance : score
            },
            success : function(data) {
                if (data != "1") {
                    alert("Failed to mark plan as completed");
                }
            },
            error : function(jqXHR, textStatus, errorThrown) {
                alert("error: " + textStatus);
                alert("error: " + errorThronwn);
            }
        });
    }
});
    scoreimportance
  3. そしてここにデータがあります 
    <script>
    var clientData = [ {
        id : 1,
        firstline : "My first line",
        importance : 2.0
    } ];
</script>

生成中にこのプラグインを各divに適用するにはどうすればよいstarですか？アイテムのIDを知っていると、DOM全体を反復処理し、特定のimportance値を特定のstardivに設定できることを理解していますが、それはDOM全体を何度も反復処理することを意味し、電話/タブレット、特に問題を引き起こす可能性があります。 。リストが大きくなった場合。生成されているdivに上記のものを適用する方法はありますか？

4

2 に答える 2

1

各インスタンスの特定のデータに依存する多くのプラグインと同様に、各インスタンスに正しいデータを適用するには、要素をループする必要があります。

以前に提案したように、data-テンプレートを使用してスコアを属性に保存します

$('.star').each(function(){
     var score=$(this).data('score')
     $(this).raty({
           half : true,
           score : score,
          /* other options*/
     });  
});

テンプレートエンジンは、挿入される前に生成されたhtmlへのアクセスを提供する必要があります。

生成されたhtmlでプラグインを呼び出すことができ、DOMを挿入する前にそのhtmlをループすることもできます。

一部のテンプレートエンジンは、これを処理する方法が少し柔軟です。使用するテンプレートシステムによって異なります

于 2012-12-30T16:34:51.860 に答える
1

重要度をのカスタム属性に保存するのはアイデアではありませんdivか？

したがって、テンプレートは次のようになります。

<script id="clientTemplate" type="text/html">
    <span class="firstline" id="firstline_${id}">${firstline}
    <div class="star" id="s_${id}" style="cursor: pointer; width: 100px;" data-importance="${importance}"></div>
    {{if unescape( alert($data.importance)  )}}{{/if}}
    </span>
</script>

（私はそれがこのようなものだと思います、私はあなたのテンプレート言語を知りません）

HTML要素に独自の属性を追加しても大丈夫ですか？も参照してください。独自の属性の作成の詳細については。

そして、を使用して重要性を得ることができます$(this).attr("data-importance")。

編集：そして、あなたはを使用してあなたの重要性を得ることができます$(this).data("importance")。（ソースを参照）

于 2012-12-30T15:21:53.133 に答える