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 的实例不同。