Ember.js Ember.ArrayController和Ember.View之间的内容绑定[Ember-1.0.0-rc.1.js]

如何将ArrayController.content绑定到视图，以便根据ArrayController中的对象绘制画布

控制器中的值的绑定正在工作，但content.values的绑定不起作用

问题1： 这是概念上的失败吗？我无法找到问题的详细信息。对于ObjectController，它可以工作，但对于ArrayController则不行

问题2： 如果Object.values e.q.faceColor更改，更新视图的最佳解决方案是什么

Html

景色

我想在画布中为ArrayController中的每个对象绘制一个元素

App.AndonView = Ember.View.extend({

    tagName: "canvas",
    attributeBindings: ['height', 'width'],
    height: 100,
    width: 100,

    controllerBinding:'App.andonController.content',
    faceColorBinding: 'content.faceColor',
    emotionTypeBinding: 'content.emotionType',

    didInsertElement: function(){
        this.drawSmiley();        
    },

    arrayDidChange: function(){
        this.drawSmiley();
    },  

    degreesToRadians : function(degrees) {...},

    drawSmiley: function(){
        ...
        var faceColor = null;
        try {
            faceColor = this.get('faceColor');
            //alert(faceColor);         
        } catch (e) {
            alert('faceColer is empty')
        } 
        ...
    } 
});

App.andonController = Em.ArrayController.create({

    content: [

      App.Andon.create( 
      {
        emotionType: 'happy',
        faceColor: '#00ff00'
      }), 
      App.Andon.create( 
          {
              emotionType: 'sad',
              faceColor: '#665sd'
      } 
   )],

})

控制器

App.AndonView = Ember.View.extend({

    tagName: "canvas",
    attributeBindings: ['height', 'width'],
    height: 100,
    width: 100,

    controllerBinding:'App.andonController.content',
    faceColorBinding: 'content.faceColor',
    emotionTypeBinding: 'content.emotionType',

    didInsertElement: function(){
        this.drawSmiley();        
    },

    arrayDidChange: function(){
        this.drawSmiley();
    },  

    degreesToRadians : function(degrees) {...},

    drawSmiley: function(){
        ...
        var faceColor = null;
        try {
            faceColor = this.get('faceColor');
            //alert(faceColor);         
        } catch (e) {
            alert('faceColer is empty')
        } 
        ...
    } 
});

App.andonController = Em.ArrayController.create({

    content: [

      App.Andon.create( 
      {
        emotionType: 'happy',
        faceColor: '#00ff00'
      }), 
      App.Andon.create( 
          {
              emotionType: 'sad',
              faceColor: '#665sd'
      } 
   )],

})

---

通过使用contextBinding，我在这个问题上取得了一些成功。 您可以将模板更改为类似这样的内容

{{#each andon in App.andonController}}
    {{view "App.AndonView" contextBinding="andon"}}
    {{faceColor}} {{emotionType}}
{{/each}}

然后将视图中的每个值作为

this.get('context.faceColor')

等等。 我能从你的小提琴中得到快乐的脸

---

通过使用contextBinding，我在这个问题上取得了一些成功。 您可以将模板更改为类似这样的内容

{{#each andon in App.andonController}}
    {{view "App.AndonView" contextBinding="andon"}}
    {{faceColor}} {{emotionType}}
{{/each}}

然后将视图中的每个值作为

this.get('context.faceColor')

等等。 我能从你的小提琴中得到快乐的脸

---

我将对其进行一些重构，以使用itemController功能，它直接出现在每个和ArrayController上

首先，我将您的阵列控制器从andonController更改为andonController。复数形式有助于说明它是在管理Andon的集合，而不是单个对象

然后，我将制作第二个控制器来管理单个andon对象：

App.AndonController = Ember.ObjectController.extend()

现在，在您的循环中，您可以改为

{{#each App.andonsController itemController="App.AndonController"}}
    {{view "App.AndonView"}}
    {{faceColor}} {{emotionType}}
{{/each}}   

App.AndonController的实例现在是ObjectController，这意味着它将透明地传递到其内容调用，以便为循环中的每个项创建属性，包括绑定和计算属性，并且由于视图的控制器是其上下文，因此不需要在路径前添加任何内容，子视图自动获取控制器作为其上下文

我用你的JSFIDLE来说明：

---

我更不确定是否在您的视图中使用上下文属性。这主要是供模板使用的，如果您尝试将其包含在上下文不是AndonController的地方，则在内部使用它可能会导致以后违反行为预期。相反，我会绑定一个属性，比如content，我会稍微重新构造它以使用itemController功能，它直接出现在每个和ArrayController上

首先，我将您的阵列控制器从andonController更改为andonController。复数形式有助于说明它是在管理Andon的集合，而不是单个对象

然后，我将制作第二个控制器来管理单个andon对象：

App.AndonController = Ember.ObjectController.extend()

现在，在您的循环中，您可以改为

{{#each App.andonsController itemController="App.AndonController"}}
    {{view "App.AndonView"}}
    {{faceColor}} {{emotionType}}
{{/each}}   

App.AndonController的实例现在是ObjectController，这意味着它将透明地传递到其内容调用，以便为循环中的每个项创建属性，包括绑定和计算属性，并且由于视图的控制器是其上下文，因此不需要在路径前添加任何内容，子视图自动获取控制器作为其上下文

我用你的JSFIDLE来说明：

---

我更不确定是否在您的视图中使用上下文属性。这主要是供模板使用的，如果您尝试将其包含在上下文不是AndonController的地方，则在内部使用它可能会导致以后违反行为预期。我会改为绑定类似内容的属性，非常感谢！它在工作我很抱歉，我的房间太乱了。我错过了更新链接。太好了！您可以在这里阅读更多关于模板作用域的信息，非常感谢！它在工作我很抱歉，我的房间太乱了。我错过了更新链接。太好了！您可以在此处阅读有关模板作用域的更多信息