Ember.js js-使用{{bindAttr}}周围的{{{if}}和共享条件？

我使用的是Ember-1.0.0-pre2，我似乎在使用{{{if}}语句时遇到了问题，该语句包含一个{{bindAttr class=“…”}}的元素，并且绑定条件是相同的。也就是说，if station和class绑定到同一个controller属性。见代码：

<button {{action "toggleShow" target="controller"}}>Toggle Visibility</button>
{{#if show}}
   <div {{bindAttr class="show:red:green"}}>test</div>
{{/if}}

---

我现在看到了。您的原始代码有两个点监视同一个属性，这让我有点困惑，但现在它更有意义了。我真的不知道发生了什么，但我怀疑这可能与运行循环有关

我对您的代码做了一些更改（请参见此），使div现在成为子视图。您的一些属性已从控制器移动到视图中（您的规范是否允许这些家伙出现在视图中，还是必须出现在控制器中？除非我遗漏了一些内容，否则此时视图应该只关注

isOdd

和

切换值

）css通过

classNameBindings

绑定，查看绑定到父视图的

value

属性

App.myController = Ember.Controller.create({
  value: 10,

  greaterThanTen: function() {
    return this.get('value') > 10;
  }.property('value') 

});

App.MyView = Ember.View.extend({
    templateName: 'my-view',
    valueBinding: 'controller.value', 
    toggleValue: function() {
        this.set('value', (this.get('isOdd') ? 10 : 11));
    },
    isOdd: function() {
         return this.get('value') % 2 === 1;
    }.property('value'),
    ChildView: Em.View.extend({
        classNameBindings: 'parentView.isOdd:red:green'        
    })
});

现在，模板如下所示：

<script type="text/x-handlebars" data-template-name="my-view">
  <button {{action "toggleValue"}}>Toggle Value</button><br>
  {{#if greaterThanTen}}
    {{#view view.ChildView}}
       test
    {{/view}}
  {{/if}}
</script>

切换值

{{{#如果大于十}
{{{#查看视图.儿童视图}
测试
{{/view}
{{/if}

因为视图的默认标记是div，所以它呈现相同的html，并且它完全充当不同的视图，并防止不必要的重新呈现

编辑：作为概念证明，我添加了一个按钮来添加值，而不仅仅是切换，这样您就可以在看到颜色后看到颜色的变化。这是我的建议

---

让我知道这是否对您有好处

很抱歉，但在这种情况下，您为什么需要使用

bindAttr

？如果该div仅在

show

为true时才可见，则可以简单地说

test

，而无需再次调用computed属性（或在此代码中显示）。我不知道您的实际代码是什么样子的，但是如果对该计算属性的第二次调用仅在元素可见时发生，如上面的示例所示，则似乎不需要它，因此更改它可能会有所帮助。但问题可能在别处；据我记忆所及，计算属性是缓存的（真的吗？有人？）@MilkyWayJoe，我已经更新了这个问题，以反映我的问题的一个更真实的例子。对不起，如果我原来的问题让人困惑，它是为了演示问题的最基本的形式。非常感谢你的回答，并花时间把它阐述好。实际上，我们决定在{{bindAttr}}中使用一个额外的类来隐藏元素（而不是{if}），但是使用ChildView也可能同样有效。再次感谢。@WesleyWorkman出于好奇，你能展示一下你在

bindAttr

上传递的参数吗？

App.myController = Ember.Controller.create({
  value: 10,

  greaterThanTen: function() {
    return this.get('value') > 10;
  }.property('value') 

});

App.MyView = Ember.View.extend({
    templateName: 'my-view',
    valueBinding: 'controller.value', 
    toggleValue: function() {
        this.set('value', (this.get('isOdd') ? 10 : 11));
    },
    isOdd: function() {
         return this.get('value') % 2 === 1;
    }.property('value'),
    ChildView: Em.View.extend({
        classNameBindings: 'parentView.isOdd:red:green'        
    })
});

<script type="text/x-handlebars" data-template-name="my-view">
  <button {{action "toggleValue"}}>Toggle Value</button><br>
  {{#if greaterThanTen}}
    {{#view view.ChildView}}
       test
    {{/view}}
  {{/if}}
</script>