2

我想实现以下概念。你能给我一些我应该看看的提示或关键字吗？

这些是我的要求：

  • 我想渲染一个元素列表。
  • 每个元素都应该包含一个按钮。单击按钮应显示与单击的元素相关的其他详细信息（我不想使用 jquery 进行简单的隐藏和显示，因为此单击会触发对我的后端服务器的额外调用）。

我的猜测是它可以像这样工作：

  • 实现一个 ArrayController 来控制元素列表。
  • ArrayController 应该再次为每个元素包含一个控制器。
  • 单击元素时，元素视图的出口应连接到控制器以获取更多详细信息。

这些是我对这种方法的问题：

  1. 这是一个可行的方法吗？
  2. 如何实例化多个控制器并在模板中将元素传递给它？
  3. 如何访问元素的控制器，以便我可以为详细视图连接适当的控制器？

抱歉，我无法在描述中包含更多 Ember 术语。我刚刚完成了第一个教程，现在我需要有人给我正确的方向。谢谢！:-)

- - -更新 - - -

我在周末自己解决了这个问题，并提出了以下解决方案。 http://jsfiddle.net/mavilein/SNte7/4/

我认为 pangratz 提出的解决方案（第一个答案）很好，如果一个人有一个像他使用过的那样简单的模型。当我看到他的回答时，我意识到我没有足够详细地描述我的要求。其实我的要求是这样的：

列表的初始状态

  1. 第一个元素
  2. 第二元素
  3. 第三要素

单击例如项目 3 后，它应该显示它的关联项目：

  1. 第一个元素
  2. 第二元素
  3. 第三要素
    • 第三个元素的关联项目 1
    • 第三个元素的关联项目 2

因此，我希望有一个单独的控制器来控制列表中我的元素的关联项目。在我看来，网点是正确的选择。

实际上，我必须修补 ember 框架以实现所需的行为。目前我将此功能称为“动态插座名称”。目前可以在 HandleBars 模板中指定插座名称，但不能使用对象的属性动态生成这些名称。我修补了插座助手以评估 String 参数是否表示对象的属性：

Ember.Handlebars.registerHelper('outlet', function(property, options) {

  if(arguments.length === 3){      
      var optionsTemp = arguments[arguments.length - 1],
      context = arguments[0];
      var temp = Ember.Handlebars.get(this, context, optionsTemp);
      if(temp)
          property = temp;
      options = optionsTemp;
  }else if (property && property.data && property.data.isRenderData) {
     options = property;
     property = 'view';
  } 

  options.hash.currentViewBinding = "controller." + property;

  return Ember.Handlebars.helpers.view.call(this, Ember.ContainerView, options);
});

这样我就可以使用对象属性作为插座名称的值。 

<script type="text/x-handlebars" data-template-name="items" >
    {{#each item in controller}}
        {{item.description}}
        <button {{action showAssociatedItems item}}>Show Associated Items</button>
        {{outlet item.id asd}}            
    {{/each}}
</script>

在这里查看我的完整工作示例：http: //jsfiddle.net/mavilein/SNte7/4/

我的问题：您如何看待这个解决方案？我可以在不修补框架的情况下实现它吗？正如我所说，第一个提出的解决方案适用于简单模型。但我的感觉是关联的项目应该实现为模型，因此应该由 Ember 控制器控制。

4

1 回答 1

1

我会使用一个ArrayController包含所有应该显示的元素。设置——无论是否显示对象的细节——在我看来应该由视图处理，所以我不会为每个项目创建一个控制器实例。显示单个项目的视图应保留书签，无论是否显示详细信息。因此，您可以按照以下方式做一些事情，请参阅http://jsfiddle.net/pangratz666/ASHFa/：

车把：

<script type="text/x-handlebars" data-template-name="items" >
    {{#each item in controller itemViewClass="App.ItemView"}}
        {{item.description}} <button {{action toggleDetail}}>{{view.toggleDetailText}}</button>
        {{#if view.showDetail}}
            <img {{bindAttr src="item.img"}}>
        {{/if}}        
    {{/each}}
</script>​

JavaScript：

App = Ember.Application.create({});

App.ItemsView = Ember.View.extend({
    templateName: 'items'
});

App.ItemView = Ember.View.extend({
    toggleDetailText: function() {
        return this.get('showDetail') ? 'hide' : 'show';
    }.property('showDetail'),

    toggleDetail: function() {
        this.toggleProperty('showDetail');
    }
});

App.itemsController = Ember.ArrayController.create({
    content: [{
        description: 'first item',
        img: 'http://25.media.tumblr.com/tumblr_ll3y1pZDVJ1qb08qmo1_250.jpg'
    }, {
        description: 'second item',
        img: 'http://24.media.tumblr.com/tumblr_lk7u170Ztt1qb33vho1_250.jpg'
    }, {
        description: 'third item',
        img: 'http://25.media.tumblr.com/tumblr_lj5367UKg11qzgqodo1_250.jpg'
    }]
});

App.ItemsView.create({
    controllerBinding: 'App.itemsController'
}).append();

​</p>

于 2012-10-27T12:25:10.390 回答