问题标签 [ember-components]

I have an element which's height expands upon hover, however the page does not scroll down when the element extends beyond the view box.

I've heard using jquery to focus on the element upon mouseEnter allows this to work properly.

Here's what I have so far:

I've just started using Ember and am not 100% on how components work, so any information is welcome.

我有一个ApplicationController带有controllerInt和controllerString属性的控制器。

我有一个RedSquareComponent带有componentInt和componentString属性的组件。

我通过 hbs-template绑定controllerInt和controllerString到componentInt和。componentStringcomponentString=controllerString="VALUE FROM CONTROLLER"

在RedSquareComponent我也有.on('init')将"SET ON INIT"值设置为的方法componentString。

我已经向组件添加了一个操作来处​​理单击某个对象（红色方块）并将某个值（例如，1）设置为componentInt.

但是当这个动作起作用时——componentString也会改变（我不知道为什么），并且变得等于"VALUE FROM CONTROLLER".

这是一个真正预期的行为吗？

相同的代码在 Ember 12.4 上运行良好，但我已经在几个 13.* 版本上检查过它——它不起作用。

https://jsfiddle.net/AlexeyBedonik/a23ev98w/3/

我在我的 ember.js 应用程序中创建了一个顶部导航栏并将其转换为一个组件，以便在用户登录后我可以有一个简单的“欢迎 {{currentUser.fullName}}”介绍。导航栏还有其他一些原因将成为一个组件，但现在这就是我想要正常工作的内容。我们也在使用 ember-simple-auth 插件，我正在使用该session.isAuthenticated值来实现这一点。

当然，我有一个“登录”路线，当用户登录时，他们会转换到“索引”。由于某种原因，在过渡到“索引”期间似乎没有session.isAuthenticated立即捕获该值。我不知道为什么会这样，但这是另一个问题。

无论如何，我在这个应用程序中使用了很多组件，其中大多数组件从会话中获取它们的值，并独立于路由查询存储，以便我可以在多个路由上使用这些组件。导航栏也不例外。现在我有以下工作代码：

我正在阅读的所有内容都建议只使用didReceiveAttrs()而不是观察者。此外，它说计算属性通常是您希望在观察者上使用的。但是，如果没有以下内容，我似乎无法工作：

如果我尝试将其转换为计算属性，它似乎不会对属性更改做任何事情，除非我在页面已经转换到“索引”路由后刷新页面。如果我尝试仅使用didReceiveAttrs()带有 this.get('session.isAuthenticated') 逻辑的方法，仍然需要刷新页面。

那么我不了解如何使用Ember.computedand didReceiveAttrs()？有人可以给我一个例子吗？或者向我展示一种更有效的方式来完成我想要完成的事情？

更新代码：

更新 2（在 @AdamCooper 和 @kumkanillam 的帮助下的最终代码）：

所以这是最少的代码，仍然使用观察者和计算方法，但不使用组件生命周期。所以我想有时还是有必要使用观察者是我想出的。

我已经阅读了很多关于这个问题的问题，但他们似乎都没有我在这里遇到的问题。

我正在使用第三方组件（ember-highcharts），除了这个障碍外，它工作得很好。

我有一条名为仪表板的路线。现在这条路线只是使用 dummydata，它没有使用商店。这有助于说明问题。

模板/仪表板.hbs

路线/仪表板.js

模板/组件/summary-chart.hbs

组件/summary-chart.js

为什么模型未定义且未传递到摘要图表组件中？图表呈现（您可以看到标题），但当然没有绘制数据，因为模型未定义。

如果我将组件更改为此，因此数据是组件的“本地”，那么图表将使用数据点呈现：

模板/组件/summary-chart.hbs

组件/summary-chart.js

请注意，“summaryData”是与“modelTestData”相同的数据结构，因此图表了解如何绘制它。

我不明白为什么路由/控制器组合没有将模型传递给子组件。

在 Ember 2.7 中，假设您有一个Person具有Address模型的类（假设city:DS.attr()是唯一的属性）。

应用程序/模型/person.js

Employee继承自并添加状态字段（Person如已雇用、已退休、已解雇等）

应用程序/模型/employee.js

在显示 的组件中Employees，如下所示：

应用程序/模板/组件/员工列表.hbs

EmberJS 获取 this 的地址Employee（即 this ' Person'）的方法是什么，以便模板可以从 Address 模型中显示此人的城市？

当前情况： 我正在尝试找到一种方法来从组件的“didInsertElement”方法中创建特定模型的记录，并将所述数据添加到数据存储中。

当前情况的原因：我将事件侦听器附加到组件 HBS 文件中的按钮。其中一个按钮将触发两个级联但轻量级的 ajax 调用。最后一次 ajax 调用的响应将决定我是否应该创建记录。

我遇到的问题：当我尝试从组件访问这样的商店时：

我得到一个未定义的对象。对于那些询问的人，我已经在我的组件中添加了以下行：

我已经安装了 Ember-Data。

解决方案：我从大量研究中发现，与商店的互动最好通过主路线进行。但是如何将事件侦听器从路由附加到组件的 jquery 小部件？

是否有任何解决方案不需要我将所有事件侦听器代码从组件移动到路由，从而取消 ember 应该提供的模块化？

我当然在 ember-cli 中使用 Ember 2.7.0。

我来自 Rails，我曾经把我所有的 javascript 都放在“assets/application.js”中，例如：

现在有了 Ember，我必须把这段代码放在我的应用程序中吗？

我在网上读到使用：

但我不知道如何把这段代码放在app.js中，但我已经有了：

如果我在根目录中创建另一个文件，例如像这样的“mycode.js”：

并在此处使用ember-cli-build.js将其导入应用程序：

... app.import('mycode.js');

它用我的代码编译大 js，但它在我准备好的函数中根本不起作用。

怎么做？

我必须使用组件？也许是应用程序组件？

Ember 的最佳表现方式是哪一种？

我正在使用很棒的插件infinity-loader。它工作得很好，只要我在它绑定的路线的模板上使用它。

但像很多人一样，现在我决定尝试在组件上使用它。哦亲爱的。我了解如何冒泡/发送像这个小提琴节目这样的动作，这个问题解释了。

可悲的是这个，这个和这个并没有帮助。

奇怪的是，在第一页之后，Infinity 附加组件会触发动作 infinityLoad - 如果我在组件中删除我的处理程序，那么我会在控制台中看到错误“没有处理”动作，所以我知道动作当我滚动到列表末尾时正在触发。

但是当我的组件“冒泡”时，它似乎只是被吞没在路由中，并且不会导致插件触发它自己的内部处理程序。

/templates/employees/index.hbs

/routes/employees/index.js

/templates/components/employee.hbs

/components/employee-list.js

注意我还尝试使用来自 Dockyard 的这个很棒的附加组件 来解决这个问题，用于向路由发送操作。插件有效，但不是我的代码。

更新

使用下面的代码，事件现在会冒泡，当我滚动页面时，我会收到警报。但是现在我需要弄清楚如何让加载器（基本上是路线的孙子）来加载下一页。

/templates/employees/index.hbs

/routes/employees/index.js

/templates/components/employee.hbs

/components/employee-list.js

这有助于弄清楚那部分。

我有这些组件，我希望它们可以从其他组件调用。

模板/组件/post-edit.hbs

组件/post-edit.js

模板/组件/form-alert.hbs

组件/form-alert.js

我想在ajax请求后从post-edit.js文件中调用form-alert组件。 我想在ajax请求后调用其他组件并渲染并将其放入类中。 如何从其他组件调用 Ember 组件并渲染到目标元素？
form-result-placeholder

我的 Ember 版本：2.8.0

在带有闭包操作的 Ember 中，您可以传递一个函数，如下所示：

1

而不是调用一个动作，如下所示。

2

在 (1) 中，支持此组件的代码如下所示：

这使用 JQuery 从 DOM 中删除一些元素，然后调用外部加载的 JS 文件中的另一个函数 (filepicker.pick)。

在 (2) 中，相同的代码在一个动作中：

这样做有什么好处和坏处？我知道 (1) 不是这样做的推荐方式，但肯定 (1) 可以更轻松地访问其他代码component（例如组件的属性）。像往常一样，Ember文档似乎没有对此有所了解（无论如何我都找不到）。我能找到的只是这篇博文，它强调不鼓励调用任意函数（否则为什么首先要有动作？）

因此，尽管这个问题可能会导致意见，但这不是我所追求的。我想了解SCOPING这两种方法有什么区别？例如，当你在函数 INSIDE 动作内部时，从 JS 运行时的角度来看，范围有什么区别？例如，在这两种情况下，“这”是一样的吗？