Knockout：在模板中下拉而不调用自定义库函数

Question

我有一个主页面，其中包含了库：

<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.langdd.js"></script>
<!--Template binding-->
<div id="Container" ua-app-id="top" data-bind='template: {name: pageModel, data: page }'>                   
</div>
<script src="Scripts/abc.js"></script>

在模板页面中我提到了下拉列表：

<!-- ko template: {name: 'abc/dropdown.htm' } --><!-- /ko -->

我的dropdown.htm中包含以下代码：

<div id="country-select">
  <form>
    <select id="country-options" name="country-options">
      <option selected="selected"  value="us">English</option>
      <option value="fr">French</option>
    </select>
    <input value="Select" type="submit" />
  </form>
</div>

我的langdd.js有：

$(document).ready(function() {

    // --- language dropdown --- //

    // turn select into dl
    createDropDown();


    var $dropTrigger = $(".dropdown dt a");
    var $languageList = $(".dropdown dd ul");

    // open and close list when button is clicked
    $dropTrigger.toggle(function() {
        $languageList.slideDown(200);
        $dropTrigger.addClass("active");
    }, function() {
        $languageList.slideUp(200);
        $(this).removeAttr("class");
    });

    // close list when anywhere else on the screen is clicked
    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $languageList.slideUp(200);
            $dropTrigger.removeAttr("class");
    });

    // when a language is clicked, make the selection and then hide the list
    $(".dropdown dd ul li a").click(function() {
        var clickedValue = $(this).parent().attr("class");
        var clickedTitle = $(this).find("em").html();
        $("#target dt").removeClass().addClass(clickedValue);
        $("#target dt em").html(clickedTitle);
        $languageList.hide();
        $dropTrigger.removeAttr("class");
    });
});

    // actual function to transform select to definition list
    function createDropDown(){
        var $form = $("div#country-select form");
        $form.hide();
        var source = $("#country-options");
        source.removeAttr("autocomplete");
        var selected = source.find("option:selected");
        var options = $("option", source);
        $("#country-select").append('<dl id="target" class="dropdown"></dl>')
        $("#target").append('<dt class="' + selected.val() + '"><a href="#"><span class="flag"></span><em>' + selected.text() + '</em></a></dt>')
        $("#target").append('<dd><ul></ul></dd>')
        options.each(function(){
            $("#target dd ul").append('<li class="' + $(this).val() + '"><a href="' + $(this).attr("title") + '"><span class="flag"></span><em>' + $(this).text() + '</em></a></li>');
            });
    }

有些人如何调用langdd.js中的代码。我尝试将它放在同一个文件中（dropdown.htm），但仍然是相同的。