2011-01-30 8 views
1

どのように私は最後data("autocomplete")...でコードを削除し、機能にそれを置くことができますか?リファクタリングのjqueryのコード

var input = $("#CountryL"); 

    $(input).autocomplete({ 
     minLength: 0, 
     source: $(input).data('url') 
    }).data("autocomplete")._renderItem = function (ul, item) { 
     var tmp = $("<div>").setTemplate($("#"+$(input).data('template')).html()); 
     tmp.processTemplate(item); 
     $("<li></li>").data("item.autocomplete", item) 
         .append($(tmp).html()) 
         .appendTo(ul); 
     return; 
    }; 

私が行うことができるようにしたい:

function templateOverride(object){ 

object.data("autocomplete")._renderItem = function (ul, item) { 
     var tmp = $("<div>").setTemplate($("#"+$(input).data('template')).html()); 
     tmp.processTemplate(item); 
     $("<li></li>").data("item.autocomplete", item) 
         .append($(tmp).html()) 
         .appendTo(ul); 
     return; 
} 


var input = $("#CountryL"); 

$(input).autocomplete({ 
     minLength: 0, 
     source: $(input).data('url') 
}).templateOverride(this); 

答えて

2

あなたは、ほとんどがありました。単にjQueryを拡張してください:

$.fn.extend({ 
    templateOverride: function() { 
    return this.each(function() { 
     $(this).data("autocomplete")._renderItem = function (ul, item) { 
     var tmp = $("<div>").setTemplate($("#"+$(input).data('template')).html()); 
     tmp.processTemplate(item); 
     $("<li></li>").data("item.autocomplete", item) 
         .append($(tmp).html()) 
         .appendTo(ul); 
     }; 
    }); 
    } 
}); 

使い方はほぼ同じです。

$("#CountryL").autocomplete({ 
    minLength: 0, 
    source: $(input).data('url') 
}).templateOverride(); 

説明のビット:

// fn.extend() adds functions to the jQuery function library 
$.fn.extend({ 
    // it expects an object, so here we use object literal syntax (key: value) 
    templateOverride: function() { 
    // here "this" refers to the jQuery object you called the function on, 
    // which is an array, so we iterate it with each() *and* return it 
    // so jQuery function chaining does not break. 
    return this.each(function() { 
     // here "this" refers to the individual HTML objects, so we must wrap 
     // it in a jQuery call ($) to have access to its data() 
     $(this).data("autocomplete") // ... your code 
    }); 
    } 
}); 
関連する問題