首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我想在文本框中自动添加短划线(-)。我如何在一个aurelia typescript应用程序中做到这一点?

在aurelia typescript应用程序中实现在文本框中自动添加短划线(-),可以通过以下步骤实现:

  1. 创建一个自定义属性绑定器(Custom Attribute)来处理短划线的自动添加。在Aurelia中,自定义属性绑定器用于为DOM元素添加自定义行为。
    • 定义一个新的typescript类,例如DashBindingBehavior,它实现BindiingBehavior接口。
    • 在该类中,重写bind方法,获取目标元素并添加input事件监听器。
    • input事件处理程序中,检查输入的文本,并在每个字符之间添加短划线。
    • 最后,使用bindingEngine将新的自定义属性绑定器注册到应用程序中。
  • 在需要自动添加短划线的文本框上,添加自定义属性绑定器。
    • 在HTML模板中,找到目标文本框的位置。
    • 使用dash作为自定义属性绑定器,并添加到文本框元素中。

以下是一个示例实现:

首先,在dash-binding-behavior.ts中创建自定义属性绑定器:

代码语言:txt
复制
import { BindingBehavior, ValueConverter, BindingEngine, inject } from 'aurelia-framework';

@inject(BindingEngine)
export class DashBindingBehavior implements BindingBehavior {
  constructor(private bindingEngine: BindingEngine) {}

  bind(binding: any, source: any): void {
    const inputElement = binding.target;
    inputElement.addEventListener('input', (event: Event) => {
      const inputValue = inputElement.value;
      const dashedValue = inputValue.split('').join('-');
      inputElement.value = dashedValue;
      event.stopPropagation();
    });
  }
}

然后,在应用程序的某个地方,将自定义属性绑定器注册到Aurelia框架中:

代码语言:txt
复制
import { Aurelia } from 'aurelia-framework';
import { DashBindingBehavior } from './dash-binding-behavior';

Aurelia
  .register(DashBindingBehavior)
  .start();

最后,在文本框上应用自定义属性绑定器:

代码语言:txt
复制
<input type="text" value.bind="myValue & dash">

现在,当用户在文本框中输入内容时,每个字符之间都会自动添加短划线。

请注意,这仅仅是一个示例实现,并不包括完整的错误处理、属性配置等。根据实际需求,您可能需要进一步优化和完善代码。对于更多关于Aurelia的信息和示例,请参考Aurelia官方文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular、React、Vue.js等6 大主流 Web 框架都有什么优缺点?

在这篇文章,我们将对 6 款主流 Web 框架进行总结,包括我们所认为的强项和弱项。另外,我们为你留下了一些值得思考的问题。 是否需要使用框架?...对于用户来说它有一套用于构建用户界面的丰富组件,这也是本系列少有的几个框架能够做到这点。 有什么弱点和挑战?...您可以花更少的时间跟随当前的技术趋势,并更多地关注创建应用程序Aurelia 优势在哪? Aurelia 有很多关于构建 Web 应用程序的方法,结构和想法。...对于 Aurelia 来说,有一个很大的机会。如果它能够实现他的愿景,他将要完整的保存这个构建 Web 应用程序的已有的模板,但会以更健全、更完整的方式交付。...如果您致力于 Web 模型视图应用程序模块,并且你和你的团队试图想把一些事做的更好,那么 Aurelia 会是一个选择。它就像是一个正在寻求一个更大的社区来帮助它的发展和进化的框架。

2.9K00

6 大主流 Web 框架优缺点对比

我们努力对这个不可回答的问题作出回答:该用什么样的框架? 在这篇文章,我们将对这个系列中所提到的每款框架做一个总结,包括我们所认为的强项和弱项。另外,我们为你留下了一些值得思考的问题。...对于用户来说它有一套用于构建用户界面的丰富组件,这也是本系列少有的几个框架能够做到这点。 有什么弱点和挑战?...您可以花更少的时间跟随当前的技术趋势,并更多地关注创建应用程序Aurelia 优势在哪? Aurelia有很多关于构建Web应用程序的方法,结构和想法。 这个框架的编写有很多技术上的优点。...对于Aurelia来说,有一个很大的机会。如果它能够实现他的愿景,他将要完整的保存这个构建Web应用程序的已有的模板,但会以更健全、更完整的方式交付。...我们不知道Aurelia是否能够充分的利用这次机会。 为什么我会选择Aurelia? 如果您致力于Web模型视图应用程序模块,并且你和你的团队试图想把一些事做的更好,那么Aurelia会是一个选择。

2.1K20
  • Angular、React、Vue等 6 大主流 Web 框架都有什么优缺点?

    我们努力对这个不可回答的问题作出回答:该用什么样的框架? 在这篇文章,我们将对这个系列中所提到的每款框架做一个总结,包括我们所认为的强项和弱项。另外,我们为你留下了一些值得思考的问题。...对于用户来说它有一套用于构建用户界面的丰富组件,这也是本系列少有的几个框架能够做到这点。 有什么弱点和挑战?...您可以花更少的时间跟随当前的技术趋势,并更多地关注创建应用程序Aurelia 优势在哪? Aurelia有很多关于构建Web应用程序的方法,结构和想法。 这个框架的编写有很多技术上的优点。...对于Aurelia来说,有一个很大的机会。如果它能够实现他的愿景,他将要完整的保存这个构建Web应用程序的已有的模板,但会以更健全、更完整的方式交付。...我们不知道Aurelia是否能够充分的利用这次机会。 为什么我会选择Aurelia? 如果您致力于Web模型视图应用程序模块,并且你和你的团队试图想把一些事做的更好,那么Aurelia会是一个选择。

    2.3K60

    Angular、React、Vue.js 等 6 大主流 Web 框架都有什么优缺点?

    在这篇文章,我们将对 6 款主流 Web 框架进行总结,包括我们所认为的强项和弱项。另外,我们为你留下了一些值得思考的问题。 是否需要使用框架?...对于用户来说它有一套用于构建用户界面的丰富组件,这也是本系列少有的几个框架能够做到这点。 有什么弱点和挑战?...您可以花更少的时间跟随当前的技术趋势,并更多地关注创建应用程序Aurelia 优势在哪? Aurelia 有很多关于构建 Web 应用程序的方法,结构和想法。 这个框架的编写有很多技术上的优点。...对于 Aurelia 来说,有一个很大的机会。如果它能够实现他的愿景,他将要完整的保存这个构建 Web 应用程序的已有的模板,但会以更健全、更完整的方式交付。...如果您致力于 Web 模型视图应用程序模块,并且你和你的团队试图想把一些事做的更好,那么 Aurelia 会是一个选择。它就像是一个正在寻求一个更大的社区来帮助它的发展和进化的框架。

    2.3K50

    6 大主流 Web 框架优缺点对比

    我们努力对这个不可回答的问题作出回答:该用什么样的框架? 在这篇文章,我们将对这个系列中所提到的每款框架做一个总结,包括我们所认为的强项和弱项。另外,我们为你留下了一些值得思考的问题。...对于用户来说它有一套用于构建用户界面的丰富组件,这也是本系列少有的几个框架能够做到这点。 有什么弱点和挑战?...您可以花更少的时间跟随当前的技术趋势,并更多地关注创建应用程序Aurelia 优势在哪? Aurelia有很多关于构建Web应用程序的方法,结构和想法。 这个框架的编写有很多技术上的优点。...对于Aurelia来说,有一个很大的机会。如果它能够实现他的愿景,他将要完整的保存这个构建Web应用程序的已有的模板,但会以更健全、更完整的方式交付。...我们不知道Aurelia是否能够充分的利用这次机会。 为什么我会选择Aurelia? 如果您致力于Web模型视图应用程序模块,并且你和你的团队试图想把一些事做的更好,那么Aurelia会是一个选择。

    1.5K00

    基础| 六大主流框架怎么选?这里告诉你!

    对于用户来说它有一套用于构建用户界面的丰富组件,这也是本系列少有的几个框架能够做到这点。 有什么弱点和挑战?                                     ...在这一过程,你不仅需要对你的团队和组织的能力保持诚实,还要在你的初始开发过程,以及在整个应用程序的长期维护过程中保持诚实。...另外,如果你了解 typescript 的优势,Dojo2 会十分严谨的使用 typescript 来管理并提供一个稳健的开发者开发环境。...对于Aurelia来说,有一个很大的机会。如果它能够实现他的愿景,他将要完整的保存这个构建Web应用程序的已有的模板,但会以更健全、更完整的方式交付。...如果您致力于Web模型视图应用程序模块,并且你和你的团队试图想把一些事做的更好,那么Aurelia会是一个选择。它就像是一个正在寻求一个更大的社区来帮助它的发展和进化的框架。

    1.1K10

    10个最受欢迎的 JavaScript 框架,以及它们的主要特征和功能

    在本文中,将列出用来构建 Web 应用程序的前10个 JavaScript 框架。 1. AngularJS Angular 是最强大、最高效、最开源的 JavaScript 框架之一。...Meteor 捆绑了几个内置功能,反应式模板、自动 CSS 等。 智能包:为你的应用开发登录系统可能会很麻烦。但 Meteor 不会。...Aurelia Aurelia一个开源的现代 JavaScript 模块工具箱,其有助于 Web 和移动应用程序的发展。它也被称为“下一代框架”。该框架自推出以来一直受到广泛认可。...不要忘记,Aurelia 是唯一允许开发人员使用原生 TypeScript 或 JavaScript 构建组件的框架。...可扩展的 HTML:Aurelia 的可扩展 HTML 编译器允许你创建自定义 HTML 元素,可以向现有元素添加自定义属性并控制模板生成,所有这些都完全支持动态加载、数据绑定和高性能批量渲染。

    3.8K10

    排名靠前的几个JS框架发展趋势和前景

    是否在大厂和开发者社群受到推荐,GitHub、NPM趋势、Google趋势等。 是否具备一个规模庞大且活跃的技术社区。 5. velte.js —— 麻雀虽小,五脏俱全 ?...这是一个TypeScript编写的基于组件的开源JavaScript框架,于2016年发布。 2020年以来,Svelte的使用量急剧增加。 ?...尤雨溪曾评价道:Svelte 的核心思想在于“通过静态编译减少框架运行时的代码量”,因此其非常适合开发小而快速迭代的项目,而且能做到极致精简。...众多优秀的功能使React成为当今最受欢迎的框架之一,而NPM的下载量也证明了这一点。 ? 如图所示,在过去的5年里,React在下载量方面一直在前端框架占据着主导地位。...Aurelia:被认为是JavaScript的最新版本,可以扩展HTML的多种用途,包括数据绑定。 Polymer:一个由Google推出的开源代码库,可以为网站创建元素而无需进入复杂的层次。

    1.4K20

    Android O:使用自定义字体资源

    前言 Android O的新功能之一是使用自定义字体资源。在这篇文章,我们一起来看看如何在我们的应用程序中使用它们。 在Android O之前,在我们的应用中使用自定义字体有多困难?...通过fonts.google.com下载字体.png 您可以下载您选择的.otf或.ttf字体,并将它们放在res / fonts文件夹。 请注意,资源文件应使用小写字母和下划线。...创建一个字体系列 3个简单的步骤就可以做到这一点。 1、右键单击res / fonts文件夹并创建一个新的“ 字体资源文件 ”。 ?...创建新字体资源文件.png 2、为要包含的每个字体变体添加一个元素。让我们回到我们想要做的设计。字体样式很薄,粗体和斜体将是很好的。所以我们再加三个。 只想改变body内容的字体。...关键在于两个属性: 1、letterSpacing 2、lineSpacingExtra 所以考虑到这一点,这里是TextView 在布局的元素。 ...

    2.5K30

    何在 Windows 上安装 Angular:Angular CLI、Node.js 和构建工具指南

    它使您免于复杂配置和构建工具( TypeScript、Webpack 等)的麻烦。...有很多方法可以做到这一点,例如: 使用 NVM(Node版本管理器)在系统安装和使用多个版本的node 使用对应的操作系统的官方包管理器 从官方网站安装它。 让我们保持简单并使用官方网站。...由于我们将创建一个全栈应用程序,因此使用 frontend 作为前端应用程序的名称。 如前所述,CLI 会询问您是否要添加 Angular 路由?...Angular CLI 将自动在 src/app.module.ts 文件添加对组件、指令和管道的引用。...结论 在本教程,我们了解了如何在 Windows 计算机上安装 Angular CLI,并使用它从头开始初始化一个新的 Angular 项目。

    46800

    使用Typescript和ES模块发布Node模块

    我们如何使用现代的JavaScript功能(ES模块)来编写,同时又能获得TypeScript的所有好处?...这不会对我们的用户造成破坏,但这是一个错过的机会:如果我们也发布我们的类型信息,那么使用支持TypeScript的编辑器的人或用TypeScript编写应用程序的人将获得更好的体验。...提示:想在的 package.json 文件添加一个脚本来进行编译,因此无需输入以下内容: "scripts": { "tsc": "tsc -p tsconfig.json" } 然后可以运行...npm文档中有一节是关于如何做到这一点的——我们可以使用 prepublishOnly 脚本。...npm文档提到了这一点:不推荐使用prepublish ,如果只想在发布时运行代码,则应使用prepublishOnly。

    2.6K20

    如何编写类型安全的CSS模块

    一种解决方案是使用 TypeScript 定义文件为每个 CSS 模块手动创建类型,但更新这些文件非常繁琐。文章提出了一个问题,即假设在 CSS 模块添加或删除了一个类名。...然而,在CSS模块遵循BEM仍然取决于用例而有益。 将 CSS 模块添加到你的项目中 如果你想在一个 TypeScript 应用程序中使用 CSS 模块,则有几个选项。...你可以使用TypeScript定义文件手动为每个CSS模块创建类型,但更新它们很繁琐。假设从CSS模块添加或删除了一个类名。在这种情况下,必须手动更新类型,否则类型安全性将无法按预期工作。...让我们学习如何自动化它! 自动化 在这种情况下,自动化解决方案很简单。我们将自动生成类型,而不是手动创建,并提供一个脚本来验证生成的类型是否最新,以避免不正确的 CSS 模块类型泄漏到编译步骤。...有多种方法可以实现这一点。例如,我们可以构建一个将 CSS 转换为 TypeScript 定义的提取器。但是,为了避免重复造轮子,我们将利用开源包 typed-css-modules。

    98430

    Next.js 14 初学者入门指南(上)

    通过简单地在代码库添加文件和文件夹,你可以定义用户可以在浏览器访问的URL路径。下面是几个关于Next.js路由的学习场景,让我们更深入地了解如何在Next.js应用实现和管理路由。...通过简单地在文件夹名称前加上下划线_,你可以轻松地创建私有文件夹,这些文件夹及其所有子文件夹都会被Next.js的路由系统自动忽略。...你可以将这些文件放在一个前缀为下划线的文件夹,比如_lib。...这种需求在实际开发中非常常见,例如,你可能想要将所有与身份验证相关的页面(登录、注册、忘记密码等)放在同一个文件夹下以提高开发体验,但又不想在URL中体现这种文件结构。...使用路由分组解决问题 Next.js提供了一种简便的方法来实现这一点:路由分组。通过在文件夹名周围添加括号,你可以告诉Next.js这个文件夹是用于逻辑分组的,并且不应该影响到URL的结构。

    1.4K10

    如何逃离框架孤井?

    框架之外的选择 那么,如何在没有框架的情况下开发应用程序呢? 首先,我们必须明确一个反目标:不要将“不使用框架构建应用程序”与“取代框架”混淆起来了。...例如,Typescript 可以被配置为支持 JS。 在一个普通的应用程序,我们要小心谨慎地使用非超集语言,因为它们或多或少都隐含了一些约束。...要做到这一点,你需要从(客户端或服务器)应用程序上下文中选择 DOM 对象(windowdocument 和类型, Node、HTMLElement、NodeFilter),而不是直接获取。...框架因其普适性很难做到这一点。就拿影子 DOM 来说,它们不断尝试改进算法,希望能够以最聪明的方式做到这一点,但如果我们把问题缩小到应用程序层面,就会变得简单很多。...当然,在普通的服务器应用程序做到这一点也意味着需要将 JS 脚本注入到响应消息(通过引用或内联,具体取决于你想要怎样的“渐进”程度,比如将 Web 组件所需的代码嵌入到 HTML 响应,让它们在客户端执行

    30930

    基于 ChatGPT 和 React 搭建 JSON 转 TS 的 Web 应用

    ChatGPT 向你展示这一点,因为你知道,喜欢魔法(AI) ⭐️什么是 ChatGPT ?...应用程序的功能; CORS 是一个允许不同域之间通信的 Node.js 包,而 Nodemon 是一个在检测到文件更改后自动重启服务器的 Node.js 工具。...,用于将代码编辑器添加到 React 应用程序,而 React Copy to Clipboard 包允许我们通过单击按钮复制和粘贴内容从 React 应用程序删除多余的文件,并更新 App.jsx...由于我们是从 Node.js 服务请求到响应,因此向应用程序添加 loading 状态用于在请求还没有返回时通知用户正在请求。...React 应用程序添加高效的代码编辑器如何在 Node.js 与 ChatGPT 通信如何在 React 单击按钮时复制与删除内容本教程完成一个可以使用 ChatGPT API 构建的应用程序示例

    32310

    如何用 Typescript一个完整的 Vue 应用程序

    但是我们仍然需要一些带有自定义装饰器和功能的第三方包来创建一个真正的、完整的 Typescript 应用程序,而官方文档并不包含入门所需要的所有信息。...为了帮助大家全面地了解它,我们将演示如何使用 Vue CLI 构建一个新的Vue + TypeScript 应用程序。...emit3.生命周期 4.Mixins5.Vuex 在 components 目录打开 HelloWorld.vue,你会看到如下结构 注意:对于每个实例,将同时显示 TypeScript 和 Javascript...Vuex Vuex 是大多数 Vue.js 应用程序中使用的官方状态管理库。将 store 划分为命名空间模块是一个很好的实践。我们将演示如何在 TypeScript 编写它。...我们不需要将 state 作为Mutations 和 Actions 的第一个参数,这个库已经考虑到这一点。它已经被注入到那些方法

    2.2K10

    不用任何框架开发 Web 应用程序,可能吗?

    框架之外的选择 那么,如何在没有框架的情况下开发应用程序呢? 首先,我们必须明确一个反目标:不要将“不使用框架构建应用程序”与“取代框架”混淆起来了。...例如,Typescript 可以被配置为支持 JS。 在一个普通的应用程序,我们要小心谨慎地使用非超集语言,因为它们或多或少都隐含了一些约束。...要做到这一点,你需要从(客户端或服务器)应用程序上下文中选择 DOM 对象(windowdocument 和类型, Node、HTMLElement、NodeFilter),而不是直接获取。...框架因其普适性很难做到这一点。就拿影子 DOM 来说,它们不断尝试改进算法,希望能够以最聪明的方式做到这一点,但如果我们把问题缩小到应用程序层面,就会变得简单很多。...当然,在普通的服务器应用程序做到这一点也意味着需要将 JS 脚本注入到响应消息(通过引用或内联,具体取决于你想要怎样的“渐进”程度,比如将 Web 组件所需的代码嵌入到 HTML 响应,让它们在客户端执行

    55720

    2016 JavaScript 技术栈展望

    Flux 和 Redux 社区活跃且具有创造力,奉献了诸多优秀的开发工具 单向数据流比双向数据绑定的方式更适合复杂应用程序,质量更高 支持服务端渲染 虽然比起 Ember、Aurelia 和 Angular...TypeScript 和 Flow 都为 JavaScript 提供了静态类型系统,使用静态类型检查,可以有效捕获错误,减少测试量。目前来说,建议对此持观望态度。...你可能会考虑如何在部署服务器上执行构建呢?与 Ruby 的 Bundler 有所不同,NPM 使用了通配符检索文件,且第三方包可以在代码开发以及项目发布前做任意修改。...Webpack 除非你乐意在页面添加数百个脚本标签,否则的话你应该尝试用构建工具来打包页面的资源了。此外,你还需要某些工具让浏览器支持 NPM 第三方包。在这里,推荐你使用 Webpack。...不认为上述有一个完美的解决方案,但我对 API 有一个自己的认知: 可预测,遵循一致性协议 支持在一次查询获取多个实体 支持更新操作 易于调试 易于使用 到目前为止,还没有发现满足上述所有条件的解决方案

    2.1K40

    最佳Node实践之实用十式: Node大师带来的启迪

    此外,请不要将文件名大写,如果需要可以使用划线。 大写的文件名不只是看起来奇怪,而且会导致跨平台的问题。...适当地取名 这一点很明显,就是用好的名字作为文档。下面你喜欢哪一个?...当你需要的只是一些宏操作(宏可以使你准确建立你想要语句),而不是需要一整套新语言,可以考虑 Sweet.js 它会做到这一点——允许你编写生成代码的代码。...需要使用的方法是让Node服务器做类似请求,处理数据和执行业务逻辑的应用程序,并将流量卸载到另一个Web服务器(Apache httpd或Nginx)的静态文件。...Promises vs. generator vs. async await对来说算不上是个问题,因为此时在讨论已有人对于单个线程做出回复,已经写了的回调函数(并且使用CoffeeScript做到比普通

    91220
    领券