如果.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 );
答案 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' });
};
请参阅此处的文档:
答案 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>