Question

我有这个mustache模板：

<script id="stemplate" type="text/template">
    {{#data}}
        <li class="service-listitem">
            <div class="lstHeading"><b>{{Type}}:</b> {{Name}}</div>
            <div class="service-item">
                <div class="infoCap">
                    {{Information}}
                </div>
            </div>
        </li>
    {{/data}}
</script>

用于无限滚动。

但是Information的最大长度为500个字符，我希望用文本截断器将其限制为100/150。我发现jTruncate并试图像这样使用它：

$('.infoCap').jTruncate({
    length: 100,
    minTrail: 0,
    moreText: "[see all]",
    lessText: "[hide extra]",
    ellipsisText: " (truncated)",
    moreAni: "fast",
    lessAni: 2000
});

但这不适用于动态添加的内容。我应该使用on()，但我没有知道jTruncate为此目的支持的事件。

所以我有点被困在这里。任何人都知道如何做到这一点？不一定必须是jTruncate。

Answer 1

听起来与Mustache doesn't handle events properly有些相关。可能只需要该回调选项，因此您的模板有时间呈现。

Answer 2

我第一次看到这种问题。也许一个技巧就是在'.service-listitem'之前将value属性赋给元素。

每次动态添加内容时，您还会随意使用其他值更改value属性。通过这种方式，我认为你创造了一个潜在的“变革”事件。

如果可以，那就很容易做到这样：

$('.element_with_value').on('change', function(){

    $('.infoCap').jTruncate({

        length: 100,
        minTrail: 0,
        moreText: "[see all]",
        lessText: "[hide extra]",
        ellipsisText: " (truncated)",
        moreAni: "fast",
        lessAni: 2000

    });

});

我第一次遇到这个问题所以这是一个潜在的解决方案。

Answer 3

我通过在AJAX调用的$('.infoCap').expander();函数中添加success来修复此问题。

请注意，expander()来自另一个与JTruncate相同的插件，但有更多选项。

jquery less / more text动态内容

3 个答案: