Question

我要在现有的Durandal应用中添加autoComplete功能。我已经在main.js和我的组件中声明了jQuery-UI库。我构建了一个带有值的测试数组，以馈送AutoComplete小部件（console.log显示此数组中具有值）。我在AutoComplete函数附近设置了一个保持点，并且可以看到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;
    })

有人遇到过这个问题吗？

Answer 1

您应将所有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;
  })

如何使jQuery AutoComplete函数在Durandal中工作？

1 个答案: