Question

如何使用durandal JS创建自动填充文本框。鉴于代码不起作用。

视图模型（JS）

define(['repositories/customerRepository', 'plugins/router', 'plugins/http', 'durandal/app', 'knockout'], function (customerRepository, router, http, app, ko) 
{
return {
    router: router,

    activate: function () {

        var data = customerRepository.listMovies();

        $(function () {
        $("#movie").autocomplete({
            source: data,

            focus: function (event, ui) {
                $("#movie").val(ui.item.name);
                return false;
            },
            select: function (event, ui) {
                $("#movie").val(ui.item.name);
                // $("#friend-id").val(ui.item.id);
                return false;
            }
        })

               .data("ui-autocomplete")._renderItem = function (ul, item) {

                   return $("<li>")
                       .append(
                       "<a>" + "<table><tr><td rowspan=2>" + item.name + "</td></tr><tr><td>" + item.barcode + "</td></tr></table>")
                           .appendTo(ul);

               };
        });

    },




};

}）;

视图（HTML）

 <input id="movie" type="search" class="form-control" data-bind="value: searchModel.searchTerm" placeholder="Name / Bar code">

Answer 1

一个好的起点是从激活中删除逻辑并将其添加到附加方法（假设您使用的是Durandal 2.0）如果不是，则将其添加到viewAttached。当DOM准备就绪时会触发这个，所以你不需要将它包装在$（function（）{}）中;

尝试一下，看看你的jquery ui auto complete是否正确绑定。

我个人更喜欢使用Select2，然后为它创建一个ko自定义绑定。

希望这能让你朝着正确的方向前进！

Answer 2

Durandal是一个旨在处理许多事情的JavaScript框架，但它的主要目的不是创建UI元素。

使用Durandal，您可以使用Knockout创建声明性双向数据绑定，这些绑定可以提供控件，例如自动填充文本框。您最好的选择是研究如何使用Knockout创建自动完成文本框或下拉列表。

Google就此主题提供了许多结果

'autocomplete textbox knockout'

使用Durandal JS自动完成文本框

2 个答案: