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

时间:2014-12-12 10:48:29

标签: jquery knockout.js

如果.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 );

3 个答案:

答案 0 :(得分:2)

您将要使用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

答案 1 :(得分:0)

尝试使用jQuery中的“ready()”函数:

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

答案 2 :(得分:-2)

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>