如何使 jQuery AutoComplete 功能在 Durandal 中工作？

Posted 2023-05-08

【中文标题】如何使 jQuery AutoComplete 功能在 Durandal 中工作？

【英文标题】：How to make jQuery AutoComplete function work in Durandal?

【发布时间】：2019-06-03 06:39:31

【问题描述】：

我正在现有的 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;
    )

有人遇到过这个问题吗？

【参考方案1】：

您应该在名为 compositionComplete 的生命周期回调中移动所有 jQuery 功能。此函数在整个视图组成并且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;
  )

【讨论】：

你是对的。我注意到 Durandal“compositionComplete”生命周期阶段和 jQuery $(document).ready 语句之间的冲突。现在这点没问题，我必须面对一个新问题 -> 我已经用 Ajax 异步查询的结果更改了我的测试标签（TITI、TOTO...）但没有显示任何值...我经常徘徊为什么我们正在使用这个框架而不是纯 ECMA 或 jQuery ^^ 感谢您的时间和帮助