Javascript 在余烬中观察儿童观点的正确方法？

这里有一个（确保您打开了控制台）：

基本上，我有一个把手块视图作为父视图，然后循环遍历一个项目数组并为每个项目创建子块视图。稍后，这些子级将以某种方式进行修改，我希望检测并处理该事件

摘要代码：

{{#view App.outerView}}
    {{#each item in items}}
        <h6>Person:</h6>
        {{#view App.innerView}}
            <dl>
                <dt>First Name</dt><dd>{{item.first}}</dd>
                <dt>Last Name</dt><dd>{{item.last}}</dd>
            </dl>
        {{/view}}
    {{/each}}
{{/view}}

在JSFIDLE中，我试图始终突出显示最后一个子对象（active=true）。当最初插入outerView时，我们将高亮显示应用于最后一个项目，它将按预期工作。稍后，当我们添加一个新项时，我们的highlight方法会激发，但它看不到新项

关于这一点的两个问题：

• 主要问题：为什么最后一项（马特）没有突出显示？换句话说，为什么添加新项后，

  childview.length

  仍报告旧值？有没有更好的办法

• 第二个问题：为什么在添加新项目时，

  childview

  上的观察者会触发两次？（共3次：首次插入时为1次，添加1个新子项后为2次）

---

编辑：为了更好地说明我的需要，我对小提琴做了一些调整。请注意outerView的混合内容（HTML+InnerView）。基本上，我的outerView需要接受任何作为子内容的内容，而不仅仅是视图/数据的数组/集合

编辑2：进一步说明：事后处理这些子视图是另一回事，可以通过处理

子视图的内容（成员视图）或使用jQuery处理可能不是正式成员视图对象的HTML元素或任何其他方式来完成。这里的真正目标只是在任何outerView内容更改时捕获事件（使用ChildView的当前副本）

编辑3：这里有一个
更好的方法是使用

然后添加一个计算属性，该属性确定该子级是否是
活动
类的
项目视图类
上的最后一个

active: function () {
  return this.get("elementId") === this.get("parentView.childViews.lastObject.elementId");
}.property('parentView.childViews.length'),

这是一个

注意：每当需要处理视图集合时，请根据您的要求使用
CollectionView
或（这样可以更好地控制子视图操作），但是对于大多数情况，
Ember.CollectionView
就足够了
一种更好的方法是使用

然后添加一个计算属性，该属性确定该子级是否是
活动
类的
项目视图类
上的最后一个

active: function () {
  return this.get("elementId") === this.get("parentView.childViews.lastObject.elementId");
}.property('parentView.childViews.length'),

这是一个

注意：每当需要处理视图集合时，可以根据您的要求使用
CollectionView
或（这样可以更好地控制子视图的操作），但在大多数情况下
Ember.CollectionView
就足够了
您的初始代码看起来有点混乱。以下是实现相同结果的更好方法：


您应该将每个项目包装在控制器中，这可以通过
{{each}
帮助器轻松完成：

<script data-template-name="application" type="text/x-handlebars">
    This is a list:
    <ul>
        {{each controller itemController="item" itemViewClass="App.ItemView"}}
    </ul>
</script>

App.ItemView
然后将其css类绑定到控制器的
active
属性：

App.ItemController = Ember.ObjectController.extend({
    needs: ['application'], //This way each ItemController can access the ApplicationController's content (i.e. the list of all items)
    active: function() {
        return this.get('controllers.application.lastObject') === this.get('content');
    }.property('controllers.application.lastObject')
});

App.ItemView = Ember.View.extend({
    tagName: 'li',
    templateName: 'item',
    classNameBindings: ['controller.active']
});

瞧！它可以工作：）
您的初始代码看起来有点混乱。以下是实现相同结果的更好方法：


您应该将每个项目包装在控制器中，这可以通过
{{each}
帮助器轻松完成：

<script data-template-name="application" type="text/x-handlebars">
    This is a list:
    <ul>
        {{each controller itemController="item" itemViewClass="App.ItemView"}}
    </ul>
</script>

App.ItemView
然后将其css类绑定到控制器的
active
属性：

App.ItemController = Ember.ObjectController.extend({
    needs: ['application'], //This way each ItemController can access the ApplicationController's content (i.e. the list of all items)
    active: function() {
        return this.get('controllers.application.lastObject') === this.get('content');
    }.property('controllers.application.lastObject')
});

App.ItemView = Ember.View.extend({
    tagName: 'li',
    templateName: 'item',
    classNameBindings: ['controller.active']
});

瞧！它可以工作：）
奇怪的是，外部视图没有更新其子视图。你可以用CollectionView完成你现在拥有的东西，但这可能不符合你的目的？这里有一把这样的小提琴@geekingreen谢谢你的小提琴。它显示了我所期望的工作方式。但是，在这种特殊情况下，我需要能够使用块视图而不是数组绑定。不确定是否有办法让您的示例以这种方式工作。我认为您做错了…您是否尝试使用ContainerView？？？可能发生的情况是，ChildView实际上是中间虚拟视图的子视图，而您看到的是ChildView数组的旧副本，因为它们实际上不是您的ChildView。问题是为什么观察员开火？Hmmmm。如果在foobar观察器中放置一个断点，并在此中检查实际的子视图。_childView，您可以看到这。_childView[0]。_childView包括新创建的尚未命名的名称，但这。_childView[0]。childView不包括。然而，应该是后者影响您的outerView的childViews属性，而不是前者。奇怪。奇怪的是外部视图没有更新它的childview。你可以用CollectionView完成你现在拥有的东西，但这可能不符合你的目的？这里有一把这样的小提琴@geekingreen谢谢你的小提琴。它显示了我所期望的工作方式。但是，在这种特殊情况下，我需要能够使用块视图而不是数组绑定。不确定是否有办法让您的示例以这种方式工作。我认为您做错了…您是否尝试使用ContainerView？？？可能发生的情况是，ChildView实际上是中间虚拟视图的子视图，而您看到的是ChildView数组的旧副本，因为它们实际上不是您的ChildView。问题是为什么观察员开火？Hmmmm。如果在foobar观察器中放置一个断点，并在此中检查实际的子视图。_childView，您可以看到这。_childView[0]。_childView包括新创建的尚未命名的名称，但这。_childView[0]。childView不包括。但这是后者