1

tl;博士:当我只想要一个时,Ember 正在创建 ArrayController 的两个实例。如何确保我的代码始终引用同一个?

场景

使用 ember,我正在尝试创建页面的一部分,潜在买家可以在其中从两组选项中进行选择,然后单击按钮接受这些选项并根据他们的选择重定向到另一个页面。例子:

在此处输入图像描述

但是,当我单击该按钮时,它会使用页面首次加载时选择的任何内容,而忽略其间的任何操作。

让我们通过代码

当您单击立即保留按钮时,它会触发 LessonPackagesController 上的操作:

#handlebars template
<a {{action bookLesson on="click"}}>Reserve Now</a>

这是它触发的动作:(如果你不理解 emberscript,想象它只是伪代码......运行)

#LessonPackagesController
bookLesson: ->
  window.location = @bookingUrl

它指向的位置当前在 ember 应用程序之外,所以我认为 transitionToRoute 及其兄弟方法不可行。

@bookingUrl 是控制器上的计算属性。

#LessonPackagesController
+computed chosenPackage lessonType
bookingUrl: ->
  url = "/instructors/#{@id}/lesson_bookings/new"
  url += "/#{@lessonType}"
  url += "/#{@chosenPackage.name}" if @chosenPackage
  url

为简化起见,我首先将@lessonType 设置为默认值('private'),我们不必担心@id 是如何被获取的,因为它正在工作。

在我们深入了解@chosenPackage 如何更新的细节之前,我整理了一些每次更新@chosenPackage 时记录的代码,确认@chosenPackage 和@bookingUrl 都按预期更新。

#LessonPackagesController
+observer chosenPackage
yolo: ->
  console.log(@bookingUrl)

每当我单击课程包(例如六课包)时,我都会在控制台中看到以下内容:/instructors/58/lesson_bookings/new/private/six. 这完全符合我的预期。

但是,当我单击立即预订按钮时,我得到以下信息:/instructors/58/lesson_bookings/new/private. 这是@chosenPackage 更新之前存在的@bookingUrl。

情节变厚了

在进一步的测试中,我在 'yolo' 中添加了一个 @content 日志,发现内容是……一个空数组。将它与@bookLesson 中的空@chosenPackage 放在一起,我推测我正在访问LessonPackagesController 的两个不同实例。以下是我在更新@chosenPackage(触发@yolo 函数)时访问它的方式:

class App.LessonPackageController extends Ember.ObjectController
  needs: ['lessonPackages']
  selectMe: ->
    @chosenPackage = this

  +computed chosenPackage
  chosen: ->
    this == @chosenPackage

  chosenPackageBinding: 'controllers.lessonPackages.chosenPackage'
  chosenPackage: ''

我知道所有 LessonPackageController 实例都与同一个 LessonPackagesController 交互,因为选择一个将取消选择当前选择的包。但是,它恰好与调用 @bookLesson 的实例不同。

我如何确保这两个实例实际上是一个实例,同一个实例?

4

0 回答 0