0

コードはほとんど機能していますが、ポップアップ ウィンドウでオートコンプリートを機能させることができません。次のことを行う場合: プロジェクトの実行中にポップアップ ウィンドウを開き、FireBug コンソールに次のように入力します。

 $(":input[data-autocomplete]").each(function() {
                        $(this).autocomplete({ source: $(this).attr("data-skillsautocomplete") });
                    });

その後、すべてが完璧に機能します。したがって、問題は、jquery 関数をポップアップ ウィンドウに渡す方法がわからないことです。それを手伝ってください。

JS

ko.bindingHandlers.jqDialog = {
    init: function(element, valueAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor()) || {};
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).dialog("destroy");
        });
        setTimeout(function() {
            $(element).dialog(options);
        }, 0);
    }
};
ko.bindingHandlers.openDialog = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            $(element).dialog("open");
        } else {
            $(element).dialog("close");
        }
    }
};
ko.bindingHandlers.jqButton = {
    init: function(element, valueAccessor) {
    var options = ko.utils.unwrapObservable(valueAccessor()) || {};
    //handle disposal
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
        $(element).button("destroy");
    });
    $(element).button(options);
    }
};

     $(":input[data-autocomplete]").each(function() {
                        $(this).autocomplete({ source: $(this).attr("data-skillsAutocomplete") });
                    });

     function pageModel() {

        self.selectedVacancyForEdit = ko.observable();
        self.skillToAdd = ko.observable();

        self.editVacancy = function(){
            self.selectedVacancyForEdit(new Vacancy());
            //here pop-up window opens
        }  
        self.addSkill = function(){
            //adding skill
        }  
    }

UI
     ....code....
    //Pop-up window
    <div id="details" data-bind="jqDialog: { autoOpen: false, resizable: true, modal: true, width:'auto'}, template: { name: 'editTmpl', data: selectedVacancyForEdit, if: selectedVacancyForEdit }, openDialog: selectedVacancyForEdit"></div>
        <script id="editTmpl" type="text/html">   
            <fieldset>
                 <form data-bind="submit: $root.addSkill">
                     Add skill: <input type="text" data-bind="value: $root.skillToAdd, 
                                 valueUpdate: 'blur'"
                                 data-skillsAutocomplete="@Url.Action("SearchSkill", "Home")"
                                 name="search"/>`
            </fieldset>
    </script>
</div>
4

1 に答える 1