Question

我正在Ember的帮助下开发Cordova应用程序。我的应用程序中有很多动态元素。这些是Bootstrap缩略图，点击后链接到其他路线。

我想制作这些缩略图clickable。如果我使用Views，我将必须为所有缩略图编写唯一的视图。

我听说过mixins。可以定义一般视图：

传递模型
使用模型

换句话说，由于每个视图在语义上执行相同的操作，我希望能够执行类似于

{{#each}}
  {{#view App.AllView this}}
   .
  {{/view}}
{{/each}}

在模板和视图中：

App.AllView = Ember.View.extend({
  click: function(evt, model){
      this.controllerFor('route').set('content', model);
      this.transitionTo('route');
  }
});

更新

按照@ givanse的回答，我制作了以下组件

<script type="text/x-handlebars" data-template-name="components/thumbnail-view">
  <div {{bind-attr class=class}}>
    <div class="thumbnail">
      <div class="caption">
        {{name}}
      </div>
      <img {{bind-attr src=image }}>
    </div>
  </div>
</script>

并在我的模板中使用它：

<script type="text/x-handlebars" data-template-name="types">
  <div class="row">
    {{#each model}}
    {{thumbnail-view action="goToCategory" class="col-xs-12" param=this name=name image=image}}
    {{/each}}
  </div>
</script>

Ember

：

Pioneer.ThumbnailViewComponent = Ember.Component.extend({
  click: function(){
    this.sendAction('action', this.get('param'));
  }
});

行动goToCategory在我的ApplicationRoute

希望这有助于某人！

Answer 1

您需要的是组件，例如：

<script data-template-name="index">
  {{#each}}
    {{img-thumbnail imgId="id/path/name"}}
  {{/each}}
</script>

<script data-template-name="components/img-thumbnail">
  {{! whatever you need to make your thumbnail }}
</script>

App.ImgThumbnailComponent = Ember.Component.extend({
  // handle events, classes, etc.
});

请参阅：

http://emberjs.com/guides/components/

http://emberjs.com/api/classes/Ember.Component.html

使div可单击 - 对多个元素采取行动的Ember视图

1 个答案: