Question

在我的webapp中，我需要创建一些具有不同内容的相同块（一些文本，评级，一些按钮）（即文本和评级不同，按钮ID不同）。为此，我使用的是jQuery模板。

同时，对于评级我使用“Raty”jQuery插件。它将评级显示为填充星号和空星号，并在模板填充数据时将值传递给它。

但是，我无法找到在模板处理时将插件应用于相应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;"></div>
    {{if unescape( alert($data.importance)  )}}{{/if}}
    </span>
</script>

//警报只是检查我们是否可以访问必要的数据

这是我们需要应用于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);
            }
        });
    }
});

//我需要将score值替换为下面的importance值

这是数据

<script>
    var clientData = [ {
        id : 1,
        firstline : "My first line",
        importance : 2.0
    } ];
</script>

如何在生成这些插件时将此插件应用于每个star div？我理解，知道项目的id我可以迭代整个DOM并将特定的importance值设置为特定的star div，但这意味着要遍历整个DOM很多次，这可能会给手机/平板电脑带来麻烦，尤其是如果列表变大。有没有办法在生成div时将所述东西应用于div？

Answer 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>

_{（我想它是这样的，我不知道你的模板语言）}

有关创建自己的属性的详细信息，另请参阅Is it OK to add your own attributes to HTML elements?。

~~然后你可以使用$(this).attr("data-importance")来获得你的重要性。~~

编辑：然后您可以使用$(this).data("importance")获取您的重要性。（见source）

Answer 2

与许多依赖于每个实例的特定数据的插件一样，您必须遍历这些元素以将正确的数据应用于每个实例。

如前所述，使用模板

将分数存储在data-属性中

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

您的模板引擎应该允许您在插入之前访问它生成的html。

你可以在它生成的html上调用插件，你也可以在插入DOM之前遍历那个html。

某些模板引擎在如何处理此问题方面更灵活一些。这取决于使用的模板系统

jQuery模板，将jQuery插件应用于每个模板项

2 个答案: