Question

如果.numberplate是由淘汰赛动态生成的，我该如何修改以下代码来调用它？

$('.numberplate').fitText(0.55, { maxFontSize: '60px' });

编辑：

<!--ko foreach: vehicle -->
    ...
    <span class="numberplate">N120AMK</span>
    ...
<!-- /ko -->

<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/knockout.js"></script>
<script src="~/Scripts/jquery.fittext.js"></script>
<script>
    $('.numberplate').fitText(0.55, { maxFontSize: '60px' });
</script>

第二次编辑：

/*global jQuery */
/*!
* FitText.js 1.2
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/

(function( $ ){

  $.fn.fitText = function( kompressor, options ) {

    // Setup options
    var compressor = kompressor || 1,
        settings = $.extend({
          'minFontSize' : Number.NEGATIVE_INFINITY,
          'maxFontSize' : Number.POSITIVE_INFINITY
        }, options);

    return this.each(function(){

      // Store the object
      var $this = $(this);

      // Resizer() resizes items based on the object width divided by the compressor * 10
      var resizer = function () {
        $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
      };

      // Call once to set.
      resizer();

      // Call on resize. Opera debounces their resize by default.
      $(window).on('resize.fittext orientationchange.fittext', resizer);

    });

  };

})( jQuery );

Answer 1

您将要使用afterRender选项在动态创建的内容上调用jquery小部件。首先，在你看来：

<!--ko foreach: { data: vehicle, afterAdd: fitText } -->
    ...
    <span class="numberplate">N120AMK</span>
    ...
<!-- /ko -->

然后，在你的viewModel上：

fitText = function(element, index, data) {
    $(element).find('.numberplate').fitText(0.55, { maxFontSize: '60px' });
};

请参阅此处的文档：

http://knockoutjs.com/documentation/foreach-binding.html#note-7-post-processing-or-animating-the-generated-dom-elements

Answer 2

尝试使用jQuery中的“ready（）”函数：

<script>
    $(document).ready(function(){
        $('.numberplate').fitText(0.55, { maxFontSize: '60px' });
    });
</script>

Answer 3

Knockout-way只是编写一个只实现init-function的自定义绑定。 4-5行代码，你事先清楚了！

静态示例：

ko.bindingHandlers.fitText = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        $(element).fitText(0.55, { maxFontSize: '60px' });
    }
}

HTML：

<span data-bind="fitText: {}"></span>

在淘汰赛foreach循环中实例化内容上的jQuery小部件

3 个答案: