javascript - Ember 1.13，查看查找

Question

在 ember 1.13 之前，我使用的是

  var containerView = Em.View.views[view_id]; 

获取具有 View id 的 ContainerView 实例，并手动将 childView 添加到此容器 View ，这曾经工作得很好。

从 ember 1.13 开始，不支持此 View 查找。推荐的方法是什么？

问题是同一个containerView有多个具有不同id的实例。所以我需要从查找中获取正确的 containerView 实例。

谢谢

更新:

我有一个父(小部件)组件: 父组件.hbs

......

{{input value=someBinding1 click='showCalendar'}}
{{calendar-component month=month1 disableBefore=disableBefore1}}

{{input value=someBinding2 click='showCalendar'}}
{{calendar-component month=month2 disableBefore=disableBefore2}}

{{input value=someBinding3 click='showCalendar'}}
{{calendar-component month=month3 disableBefore=disableBefore3}}

......

所以本质上我可以有多个日期(输入)字段，单击这些字段时应该显示一个日历组件。如果我按照上面的方式编写代码，它将创建日历组件的 3 个(或尽可能多的日期字段)实例。这些日期字段的数量是动态的。我不想创建如此多的日历组件，因为我看到移动设备上的性能不佳。

所以我所做的是:

......

{{input value=someBinding1 click='showCalendar'}}
{{calendar-container-view id='calendarContainerView1'}}

{{input value=someBinding2 click='showCalendar'}}
{{calendar-container-view id='calendarContainerView2'}}

{{input value=someBinding3 click='showCalendar'}}
{{calendar-container-view id='calendarContainerView2'}}

......

并且calendar-container-view有一个空的childViews数组来启动。当用户单击输入字段时，我使用 Em.View.views[containerViewId] 获取相应的 containerView 实例，并将日历实例附加到其中。单击另一个输入时，我将其从旧的父容器 View 中删除并将其添加到新的容器 View 中。因此，只有一个由 parentComponent.js 创建并删除并添加到容器 View 中的日历实例。

希望这是有道理的。如果需要的话我可以创建一个 jsbin 。

非常感谢!

Answer 1

我认为你可以通过模型实例操作你的逻辑而不是 View (我的意思是这里的模型概念，它可能是一些数组对象或记录数组)。

很明显，您有模型(作为某个数组)，因为您提到了多个实例。

你可能会这样做:

{{!-- list of input fields --}}
{{#each model as |item|}}
  {{item-input-field item=item value=item.someBinding1 clickInput="setCurrentItemWhenInstanceClick"}}
{{/each}}

{{!-- and one calendar-component --}}
{{#if currentItem}}
  {{calendar-component item=currentItem month=currentMonth disableBefore=currentDisableBefore}}
{{/if}}

其中item-input-field是一个组件，它扩展input并将其item传递给父组件或 Controller 通过操作 clickInput(action up)。

然后父组件(或 Controller )中的 setCurrentItemWhenInstanceClick 操作应设置 currentItem、currentMonth 和 currentDisableBefore 数据( 数据向下到日历组件)，因此您的日历组件将会显示。