Ember之间的contentBinding.ArrayController和Ember.视图(ember-1.0.0-

如何绑定我的ArrayController。内容到一个视图，以便根据我的ArrayController中的对象绘制画布。

jsFiddle -示例代码控制器中值的绑定工作了，但是content.values.

没有。

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

问题2:什么是最好的解决方案，更新视图，如果对象。值(如faceColor)的变化?

Html

<script type="text/x-handlebars">
<h1>each</h1>
{{#each App.andonController}}
    {{view "App.AndonView"}}
    {{faceColor}} {{emotionType}}
{{/each}}   
</script>

的对象

App.Andon = Ember.Object.extend({
    emotionType: '',
    faceColor: '',
});

视图

我想在我的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'
      } 
   )],
})

我将重新构建这一点，以使用itemController功能，该功能直接存在于each和ArrayController上。

首先，我会将您的阵列控制器从andonController更改为andonsController。复数形式有助于清楚地表明它管理的是andons的集合，而不是单个对象。

然后我将创建第二个控制器来管理单个和对象:

App.AndonController = Ember.ObjectController.extend()

现在，在你的循环中你可以改成

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

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

我已经fork了你的JSFiddle来说明:

http://jsfiddle.net/H2zPk/

我更不确定在您的视图中使用context属性。这主要是为模板使用，并在内部使用它可能导致违反行为的期望以后，如果例如你试图包括它的地方context不是一个AndonController。相反，我将像content (<-注意拼写变化)这样的属性绑定到给定用途的已知有效路径，并访问该内部变量的属性。(我也不会绑定上下文属性，我认为这是一个反模式)。

在一般情况下，你有一个情况，你依赖的属性，得到外部设置，要么可能不设置在某些情况下，或者可能不一定指向一个对象，你期望，我会避免使用它直接在你的类，而不是定义一个绑定。(我特别指的是内置属性，如controller或context，其行为可以有所不同。您自己的属性可以定义合理的默认值，并记录已知的行为，当然可以安全地直接在视图中使用)。您不仅可以避免依赖于可能在所有情况下都不相同的行为(或者，更糟糕的是，被认为是私有的或内部的，并且可能在将来改变的行为)，然后您可以用计算属性替换您的内部属性，或者只是将其绑定到您喜欢的任何地方，而不会有破坏Ember 的风险，也不需要更新您的引用

。

我使用contextBinding解决了这个问题。你可以这样修改你的模板:

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

，然后将View中的每个值获取为

this.get('context.faceColor')

等等。我能让快乐的脸出现在你的小提琴里。

http://jsfiddle.net/gcLft/2/

相关内容

最新更新

热门标签：