aurelia 相关问题

Aurelia是下一代JavaScript客户端框架,它利用简单的约定来增强您的创造力。


i18n 的单个或多个 Translation.json 文件?

我正在 Aurelia 开展一个项目并使用 aurelia-i18n 插件。 到目前为止,它看起来很棒,翻译正在工作,并且当我更改区域设置时会立即更新界面语言。 问题:是...

回答 2 投票 0

Aurelia 中的图像源绑定

我正在尝试在 aurelia 组件中绑定 img 标签的 src 属性,我该怎么做? 我正在这样的 reapeat.for 循环中创建一些图像: 我正在尝试在 aurelia 组件中绑定 src 标签的 img 属性,我该怎么做? 我正在以这种方式在 reapeat.for 循环中创建一些图像: <img repeat.for="picture of infoboard.memberPictures" src.bind="picture"> 其中memberPictures数组来自视图模型,picture的值为相对地址:../../../assets/pictures/img_avatar.png。 在视图模型中,我从数据库中获取成员信息,并通过处理数据,以这种方式填充 memberPictures 数组: this.httpClient.fetch(`boards/membersof/${this.infoboard.id}`) .then(response => response.json()) .then(data => { this.infoboard.memberPictures = data.result.map(element => `../../../assets/pictures/${element.profile_pic}.png`); }); 这样绑定地址,图片加载不出来,像这样: 并且浏览器控制台显示以下错误: img_avatar.png:1 GET http://localhost:8080/assets/pictures/img_avatar.png 404 (Not Found) 检查元素时,会员头像的图片标签是这样的: <img src.bind="picture" class="au-target" au-target-id="10" src="../../../assets/pictures/img_avatar.png"> 但是,如果我们向图像源提供与上例中生成的地址完全相同的静态图像,如下所示: <img repeat.for="picture of infoboard.memberPictures" src.bind="../../../assets/pictures/img_avatar.png"> 不会有任何问题: 现在通过检查元素有不同的结果: <img src="/a5e81f19cf2c587876fd1bb08ae0249f.png"> 显然,aurelia 中处理静态文件的方式有所不同。图片源怎么变成这样了,绑定图片源的正确方式是什么? 这是因为您正在使用 webpack 来捆绑您的项目。 webpack 所做的事情之一是将所有静态文件(图像、字体等)打包到包中 - 然后用指向包中相同资源的不同“url”替换所有静态引用。 在运行时,您无权访问捆绑包之外的内容。 顺便说一句,这就是为什么我们需要对所有 aurelia 组件使用 PLATFORM.moduleName(),因为 webpack 默认情况下不会选择这些组件。 在您的情况下,您将 img 标签绑定到动态网址。 Webpack 没有任何方法将它们捆绑到输出包中,因为这些 url 是在运行时生成的。 您需要使用 require 关键字才能在运行时工作 对于这样的目录结构: export class App { public urls:string[] = ["test", "t1", "t2", "t3"]; getUrl(name) { return require(`./assets/${name}.png`); } } <template> <img repeat.for="url of urls" src.bind="getUrl(url)"> </template> 编辑: 在您的情况下,只需使用: this.httpClient.fetch(`boards/membersof/${this.infoboard.id}`) .then(response => response.json()) .then(data => { this.infoboard.memberPictures = data.result.map(element => require(`../../../assets/pictures/${element.profile_pic}.png`)); });

回答 1 投票 0

ViewSlot 与 Aurelia 抛出错误

尝试将ViewSlot注入到基于骨架的esnext项目中,浏览器中显示以下错误。我刚刚使用基于 systemjs 的 CLI 创建了一个简单的项目,我看到了相同的...

回答 2 投票 0

aurelia slickgrid 中的多行选择和行视图详细信息

这是我的网格定义和列定义。 定义网格():无效{ this.columnDefinitions = [ { id: '州', 名称:'状态', 字段:'状态', 可排序:...

回答 1 投票 0

change.delegate 非常慢

我有一个对象,它有两个对象数组,如下所示: 兴趣={ 最感兴趣:[], 独特的兴趣:[] }; 我还有一个输入,当更改时,使用一个函数来搜索 el...

回答 1 投票 0

aurelia slickgrid 6 中缺少一些图标

我使用的是 aurelia slickgrid 6 和 bootstrap 5。我缺少一些图标,例如列顶部或侧面的小排序图标,如图所示。我是否缺少一些图书馆或者 aurelia slickgrid

回答 1 投票 0

如何使用Aurelia-Dialog插件的“位置”配置设置

问题: 我一直在尝试弄清楚如何在基于 Aurelia 的网站上使用 Aurelia-Dialog 插件的“位置”配置设置,但我无法弄清楚无法找到单个检查...

回答 2 投票 0

Vitest 配置 - 路径导入错误 - 文件是否存在?

我在使用 Aurelia 和 Vitest 的存储库中遇到了麻烦。 结构是这样的: 项目根目录 │ ├── 来源 │ ├── 服务 │ │ └── api.js │ │ └── auth.js │ ├── 浏览次数 │ │ └──

回答 1 投票 0

无法用文件替换目录 /var/lib/docker/overlay2/if2ip5okvavl8u6jpdtpczuog/merged/app/node_modules/@ampproject/remapping

在我的 Windows 计算机上,我尝试使用以下 Dockerfile 构建容器化的 Node.js 应用程序: # 使用最新版本的nodejs 来自节点:lts-alpine # 安装 aurelia-cli...

回答 2 投票 0

chunk 在 Aurelia PLATFORM.moduleName(module, chunk) 中做什么?

我已经阅读了在线文档和代码中的API文档。 网上说:“按名称将模块添加到块中” API实际上什么也没说 它添加了什么,应该是什么?...

回答 1 投票 0

Bootstrap 4 Beta 使用 Webpack 3.x 导入 Popper.js 会抛出 Popper 不是构造函数

Bootstrap 4 Beta 已经发布了……耶!然而,Tether 被 Popper.js 替换为工具提示(和其他功能),但我看到控制台中抛出了一个新错误,建议我对 P 进行更改...

回答 5 投票 0

解决 VS 2017 中的“节点定义冲突”TS4090 错误

我有一个可以构建并运行的 TypeScript 项目,但我有大量构建错误,这些错误似乎都源于一个错误: TS4090:(TS) 在“C:/[projectpath]/

回答 7 投票 0

如何使用Aurelia DI访问子类中的模块?

使用 Aurelia V1,我尝试从父级调用抽象 init(),其中 init() 在子级中实现。 init() 使用一个模块,该模块被注入到 Child 中。 我想我看到一个错误是因为...

回答 1 投票 0

在aurelia中使用另一个兄弟组件更新组件时如何更新UI

在导航栏类中,我尝试调用 TodoList 类 addTodoToList 方法来添加待办事项,但待办事项附加在 Todo 类的项目数组中,但未以列表形式显示在 UI 上。如果我编码...

回答 1 投票 0

如何使用 ref.view-model 功能

我在文档中看到了此功能,但我无法从该信息中完全弄清楚如何使用它。 它说: 我在文档中看到了此功能,但我无法从该信息中完全弄清楚如何使用它。 它说: <i-produce-a-value ref.view-model="producer"></i-produce-a-value> <i-consume-a-value input.bind="producer.output"></i-consume-a-value> 这在现实世界的例子中是什么样子? 此语法实际上已更改为与我们最新版本中的 Aurelia 绑定语法的其余部分更加一致(在您发布此问题后出现)。 现在的语法是: <i-produce-a-value view-model.ref="producer"></i-produce-a-value> <i-consume-a-value input.bind="producer.output"></i-consume-a-value> 但无论如何,view-model.ref="producer"为i-produce-a-value自定义元素创建视图模型的别名,然后您可以在其他地方使用该别名来传递给另一个自定义元素或使用VM的属性。因此,在上面代码的第二行中, i-consume-a-value 有一个名为 input 的属性,该属性已绑定到 output 元素的 VM 的 i-produce-a-value 属性。 让我们看一个例子。假设您有一个 DatePicker 自定义元素。它的视图模型具有多个属性,例如 dayOfWeek 和 month。您想使用视图中其他元素的属性。您可以将 View 的 VM 上的属性绑定到其中每个属性,然后绑定到视图中要使用这些值的其他位置的 View 属性,或者您可以使用 view-model.ref 来允许您直接绑定到这些值在您的 DatePicker 自定义元素上。像这样的东西: <date-picker value.bind="eventDate" view-model.ref="eventDateVM"></date-picker> <div> <p>Event Month: ${eventDateVM.month}</p> <p>Event Day of Week: ${eventDateVM.dayOfWeek}</p> <img src.bind="eventDateVM.dayInHistoryImageUrl" /> </div> 因此,在本示例中,我们将 DatePicker 的 value 属性绑定到页面 VM 的 eventDate 属性。更重要的是,我们为 DatePicker 自定义元素的 VM 创建了一个别名,并将其命名为 eventDateVM。然后,我们使用此别名来显示自定义元素中选取的日期的月份和星期几。这个虚构的 DatePicker 还有一个 VM 属性,该属性设置为所选日期发生的某件事的图片的 url,因此我们将该 url 绑定到 src 标签的 img 属性。 如果您对 Aurelia 的这个非常强大的功能还有任何疑问,请告诉我! 仅更新:在 Aurelia 2 中,语法 已更改为 <i-produce-a-value component.ref="producer"></i-produce-a-value>

回答 2 投票 0

如何解决“TypeError:尝试获取资源时出现网络错误。”

当我使用 aurelia-fetch-client 将 json 数据发布到服务器时,我收到此错误“TypeError:尝试获取资源时出现 NetworkError”。我认为你的回答对我非常有用。 帖子.html <

回答 6 投票 0

npm install 在两台具有相同配置的计算机上给出不同的输出

我有2台电脑。相同的配置。 Windows 版本 11 Node.js 版本 14.17.1 npm 版本 6.14.13 打字稿版本 4.5.5 我有一个 package.json 文件。当我执行 npm install 时,输出 l...

回答 2 投票 0

在 Aurelia 中:如何将网络摄像头的输出绑定到视频元素的 `srcObject` 属性?

如何将网络摄像头的输出绑定到 Aurelia 中视频元素的 srcObject 属性? 我的 HTML 中有以下视频元素 如何将网络摄像头的输出绑定到 Aurelia 中视频元素的 srcObject 属性? 我的 HTML 中有以下 video 元素 <video id="video" srcObject.bind="cameraStream" if.bind="cameraStream">Video stream not available.</video> 在我的 JavaScript 文件中,我有以下内容 navigator.mediaDevices.getUserMedia({video: true, audio: false}) .then((stream) => { this.cameraStream = stream console.log('this.cameraStream', this.cameraStream) }) .catch((err) => { console.error(`An error occurred:`, err) }) 该页面要求访问网络摄像头,我已经记录了 this.cameraStream 的值,并且得到了下面的输出,但我没有在视频对象中获取任何内容。 预先感谢您的帮助。 好吧,我明白了。我必须使用 ref 属性来引用 attached 处理程序中的 HTML 对象,并且我需要删除 if.bind,因为它阻止 ref 属性定义 this.video。然后,我可以从设置video.srcObject HTML <video id="video" ref="video">Video stream not available.</video> JS attached() { let video = this.video navigator.mediaDevices .getUserMedia({ video: true, audio: false }) .then((stream) => { video.srcObject = stream video.play() }) .catch((err) => { console.error(`An error occurred:`, err) }) }

回答 1 投票 0

Promise 回调中的单元测试逻辑

我有一个 ES6 / Aurelia 应用程序,我正在使用 jasmine 来测试。我试图测试的方法看起来像这样: 更新() { 让 vm = 这个; vm.getData() .then((响应) =>...

回答 3 投票 0

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.