3

我在 Ember-1.0.0-pre2 上，我似乎在使用 {{#if}} 语句围绕具有 {{bindAttr class="..."}} 且绑定条件为的元素时遇到问题相同。IE if 语句和类绑定到相同的控制器属性。见代码：

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

http://jsfiddle.net/y49ch/10/

如果您多次单击“切换可见性”按钮，您会注意到一个常见错误：“您所做的某些事情导致视图在渲染后但在插入 DOM 之前重新渲染。因为这是可以避免并且导致应用程序中出现重大性能问题的原因，这种行为已被弃用......”

乍一看似乎很愚蠢，但这是我的问题的一个非常原始的例子。就我而言，两个绑定（if 和 class 属性）的末尾都有一个计算属性。在这两种情况下，计算属性共享一个公共依赖键。当该公共依赖键更改时，它会导致两个助手都被更新，从而导致错误。

这是一个错误吗？我可以猜到这里发生了什么，但似乎我应该能够安全地做到这一点。

编辑：以上是 我遇到的问题的一个原始示例。 它旨在以非常简单的方式显示它。下面是一个更复杂的例子。

模板：

<button {{action "toggleValue" target="controller"}}>Toggle Value</button><br>
{{#if greaterThanTen}}
  <div {{bindAttr class="isOdd:red:green"}}>test</div>
{{/if}}

Javascript：

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

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

  isOdd: function() {
    return this.get('value') % 2 === 1;
  }.property('value'),

  toggleValue: function() {
    this.set('value', (this.get('isOdd') ? 10 : 11));
  }
});

http://jsfiddle.net/y49ch/16/

4

1 回答 1

1

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

我已经稍微更改了您的代码（请参阅此jsfiddle），以便 div 现在是子视图。您的某些属性已从控制器移动到视图（您的规范是否允许这些人在视图中还是必须isOdd在控制器中？除非我错过了某些内容，toggleValue此时只有视图应该关注）并且通过classNameBindings监视value绑定到父视图的属性来绑定 css。

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 的默认标签是 div，因此它呈现相同的 html，并且它完全充当不同的视图并防止不必要的重新呈现。

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

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

于 2012-11-14T14:57:02.730 回答