Question

我正在尝试做一些非常简单的事情，但我不知道该怎么做..

我创造了一个小提琴来展示我被困的地方：http://jsfiddle.net/NQKvy/982/

我有一个项目数组：

[
          {title: 'Kris', key: '0', description: 'This is the Kris'},
          {title: 'Luke', key: '1', description: 'This is the Luke'},
          {title: 'Alex', key: '2', description: 'This is the Alex'}
];

使用此模板：

<script type="text/x-handlebars" data-template-name="application">
    {{#each item in model}}
        <a href="#" {{action 'selectionItem' item.key}}>
            {{item.title}}
    </a><br/>
    {{/each}}

    <div> 
    <!-- Display the description here -->
    </div>
</script>

在div中我想只显示一个描述。当页面加载我想从列表中显示第一个item.description，但是当用户点击任何项目时我想显示相关的描述。

例如：这里的默认描述是：“这是Kris”，如果我点击Alex，它会显示“这是Alex”等。

这是一件非常简单的事情，但我被困住了......

Answer 1

我在这里有一个有效的解决方案：

http://jsfiddle.net/A5qJ5/

基本上，您要设置一个属性selectedItem，该属性会在您调用操作selectItem时更新。

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

App.ApplicationRoute = Ember.Route.extend({
  model: function(){
      return [
          {title: 'Kris', key: '0', description: 'This is the Kris'},
          {title: 'Luke', key: '1', description: 'This is the Luke'},
          {title: 'Alex', key: '2', description: 'This is the Alex'}
      ];
  },
  setupController: function(controller,model){
    this._super(controller, model);
    controller.set('selectedItem', model.get('firstObject'));
  }
});

App.ApplicationController = Ember.ArrayController.extend({
    selectedItem: undefined,
    actions: {
        selectItem: function( item ) {
            this.set('selectedItem', item);
        }
    }
})

模板

{{#each item in model}}
    <a href="#" {{action 'selectItem' item}}>
        {{item.title}}
    </a>
    <br/>
{{/each}}

<div> 
  {{selectedItem.description}}
</div>

Emberjs显示项目数组

1 个答案: