Как заставить функцию автозаполнения jQuery работать в Durandal? - PullRequest
Новая
       23

Как заставить функцию автозаполнения jQuery работать в Durandal?

0 голосов
/ 08 января 2019

Я добавляю autoComplete функциональность в существующее приложение Durandal. Я объявил библиотеку jQuery-UI в main.js и в моем компоненте. Я создал тестовый массив со значениями для подачи виджета автозаполнения (console.log показывает, что в этом массиве есть значение). Я установил точку удержания рядом с функцией автозаполнения, и я вижу, как приложение проходит, когда срабатывает функция document.ready. Когда я пытаюсь ввести несколько букв в поле ввода, значения не отображаются. Что я забыл?

Вот мой HTML (только часть): 

<!-- Operation ID -->
<div class="form-group">
    <label class="col-xs-4" data-bind="text:props.getProperty('label.search.operation.id')"></label>
    <div class="col-xs-8">
        <input type="text" id="operationID" data-bind="value: model.filter().operationID, click: advancedSearch" class="form-control" autocomplete=on />
    </div>
</div>

Вот соответствующий JS-файл (часть), функцию можно увидеть в конце файла: 

define(['durandal/app', 'knockout', 'jquery', 'services/propertiesService', 'utils/dateUtils', 'jquery-ui'],
    function(app, ko, $, props, dateUtils, ui) {

        var model = {};

        model.trackedObjects = [];
        model.successes = ko.observableArray();
        model.errors = ko.observableArray();
        model.warnings = ko.observableArray();

        model.currencies = ko.observableArray([]);
        model.buyers = ko.observableArray([]);
        model.platforms = ko.observableArray([]);
        model.steps = ko.observableArray([]);
        model.operationTypes = ko.observableArray([]);
        model.counterparts = ko.observableArray([]);

        model.choosenRoleCode = ko.observableArray();
        model.resultCount = ko.observable(0);

        // .................................
        // Many other properties

        //Set the button 'Go on top' if the scrolling is not on top of the window
        $(window).scroll(function(event) {
            var st = $(this).scrollTop();
            if (st > 0) {
                //On top
                model.hasScrollbar(true);
            } else {
                model.hasScrollbar(false);
            }
        });
        /* _____________________ENDING - Scroll bar____________________ */

        // AUTOCOMPLETE : Fill OperationID with values
        $(document).ready(function() {
            var availableTags = [
                "TOTO",
                "TITI",
                "TUTU"
            ];
            console.log("hop : " + availableTags); // hop : TOTO,TITI,TUTU
            $("#operationID").autocomplete({
                source: availableTags
            });
        });

        return model;
    })

Кто-нибудь уже сталкивался с этой проблемой?

1 Ответ

0 голосов
/ 18 января 2019

Вы должны переместить все функциональные возможности jQuery в обратный вызов жизненного цикла с именем compositionComplete. Эта функция выполняется после , весь вид составлен и operationID доступно на DOM 

define(['durandal/app', 'knockout', 'jquery', 'services/propertiesService', 
       'utils/dateUtils', 'jquery-ui'],
  function(app, ko, $, props, dateUtils, ui) {

    var model = {};

    model.trackedObjects = [];
    model.successes = ko.observableArray();
    model.errors = ko.observableArray();
    model.warnings = ko.observableArray();

    // ........

    model.compositionComplete: function() {
      var availableTags = ["TOTO", "TITI", "TUTU"];

      $("#operationID").autocomplete({
        source: availableTags
      });

      $(window).scroll(function(event) {
        var st = $(this).scrollTop();
        if (st > 0) {
          //On top
          model.hasScrollbar(true);
        } else {
          model.hasScrollbar(false);
        }
      });
    }

    return model;
  })
...