热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jQuery教程分享使用DurandalJS自动完成文本框

如何使用durandalJS创建自动完成文本框。鉴于代码不起作用。视图模型(JS)define(['repositoriescustomerRepository'

如何使用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 $("
  • ") .append( "" + "
    " + item.name + "
    " + item.barcode + "
    ") .appendTo(ul); }; }); }, };
  • });

    视图(HTML)

       

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

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

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

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

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

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

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

       'autocomplete textbox knockout' 

        以上就是jQuery教程分享使用Durandal JS自动完成文本框相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注(编程笔记)。


        推荐阅读
        • Html5-Canvas实现简易的抽奖转盘效果
          本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
        • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
        • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
        • Jquery 跨域问题
          为什么80%的码农都做不了架构师?JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念。当然 ... [详细]
        • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
        • 获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法
          本文介绍了获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法,包括使用jQuery的选择器和遍历方法。通过这些方法,可以方便地获取到所需的元素,并进行相应的操作。 ... [详细]
        • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
        • 开发笔记:UEditor调用上传图片上传文件等模块
          1、引入ue相关文件,写好初始代码为了更好的封装整一个单独的插件,这里我们要做到示例化ue后隐藏网页中的编辑窗口,并移除焦点。 ... [详细]
        • DOM事件大全
          1.事件:js与html的交互就是通过事件的,观察者模式2.事件流:从页面中接收事件的顺序IE::事件冒泡流,事件冒泡,事件从最具体的元素接收,然后逐级向上传播,主流浏览器都支持N ... [详细]
        • 前端简史之纵横:Node东出
          引💡Ajax的出现,带来了jQuery时代,而jQuery时代也伴随着Node风暴淡淡退出了历史舞台。如果说Ajax给前端带来了从网页静 ... [详细]
        • 本文介绍了在rhel5.5操作系统下搭建网关+LAMP+postfix+dhcp的步骤和配置方法。通过配置dhcp自动分配ip、实现外网访问公司网站、内网收发邮件、内网上网以及SNAT转换等功能。详细介绍了安装dhcp和配置相关文件的步骤,并提供了相关的命令和配置示例。 ... [详细]
        • Voicewo在线语音识别转换jQuery插件的特点和示例
          本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
        • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
          本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
        • Problemexplanation: ... [详细]
        • <!DOCTYPEhtml><htmllang=en><head><metacharset=UT ... [详细]
        author-avatar
        手浪用户2602890763
        这个家伙很懒,什么也没留下!
        PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
        Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有