Question

我正在创建一个ember应用。流程就像“page1显示供稿项目列表，点击任何供稿将用户转到第2页，显示有关该供稿的详细信息”

我在做什么： 我有一个名为app-feed的组件。模板如下

<div onclick={{action 'click' feed}}>
{{#paper-card class="card-small" as |card|}}
  <!--  <a href="feed/{{feed.id}}"> --> {{card.image src=feed.imagePath class="small-feed-img" alt=feed.title}}<!--</a>-->
    {{#card.header class="flex-box short-padding" as |header|}}
            {{#header.avatar}}
                <img class="profile-small"  src="http://app.com/users/{{feed.userName}}.jpg" alt="{{feed.name}}" />
            {{/header.avatar}}
            <span class="tag-sm like-box">
                {{feed.likes}} {{paper-icon "thumb_up" size="18"}}
                {{feed.commentCount}}{{paper-icon "chat_bubble"  size="18"}}
            </span>
    {{/card.header}}
    {{#card.actions class="action-block"}}
        {{#paper-button iconButton=true}}{{paper-icon "favorite" size="18"}}{{/paper-button}}
        {{#paper-button iconButton=true}}{{paper-icon "share" size="18"}}{{/paper-button}}
        {{#paper-button iconButton=true}}{{paper-icon "shopping_basket" size="18"}}{{/paper-button}}

    {{/card.actions}}
{{/paper-card}}
</div>

component.js如下从'余烬'中导入Ember;

export default Ember.Component.extend({
    actions:{
      click(feed){
        console.log("Click event fired:"+feed.id); //Output is correct in console
        this.sendAction("onClick", feed); //sending onClick Action
      }
    }
});

我正在我的一条路线中填充此组件的列表。模板如下

{{#app-sidenav user=model}}{{/app-sidenav}}
<div class="content">
  <div class="row">
      {{#each model as |item|}}
        {{#app-feed-small onClick=(action "getDetail" item) class="col-xs-5" feed=item}} {{/app-feed-small}}
      {{/each}}
   </div>
 </div>

route.js如下从'余烬'中导入Ember;

export default Ember.Route.extend({
    store: Ember.inject.service(),

    model(){
        //Populating module. Works just fine
    } ,
    actions:{
      getDetails(feed){
        console.log("Getting details of "+feed.id);
      }
    }   
});

我已经定义了getDetails操作，如我的template.js中提到的路线仍然是我的错误

“”断言失败：在（生成的feed.index控制器）中找不到名为'getDetail'的动作“”

feed.index是我的路线。

我使用相同的方法和修改过的纸片源来获取对应于点击纸片的项目的动作。但我无法在自己的组件中做同样的事情。请告诉我遗漏的内容

Answer 1

您的问题在于您的第二个代码段，即带有您模板的代码段。您将操作称为getDetail，但在route.js您的上一个代码段中，您将操作声明为getDetails，这与您模板中的代码不同。这是一个常见的拼写错误，有一个＆＃34; s＆＃34;结束而另一方没有。

Answer 2

动作应该在控制器中。如果控制器冒泡，则调用路径中的动作。

对于您的情况，您不需要控制器。

您可以使用ember-transition-helper

我假设你有router.js：

this.route('feeds', function(){
  this.route('edit', {path: '/:id'});
});

现在你的模板将是：

{#app-sidenav user=model}}{{/app-sidenav}}
<div class="content">
  <div class="row">
      {{#each model as |item|}}
        {{#app-feed-small onClick=(transition-to "feeds.edit" item) class="col-xs-5" feed=item}} {{/app-feed-small}}
      {{/each}}
   </div>
 </div>

Answer 3

sendAction是一种在控制器/路线中调用动作的古老方法。

新样式是使用闭包操作，它通过在值传递时创建闭包来将操作作为值传递。

是的，你是对的。该操作已correspond controller -> correspond route -> upper route -> ... -> application route能够从中冒出来，

sendAction

然而，关闭动作不会冒泡。

请参阅Ember component send action to route，其中@kumkanillam详细解释了如何使用不同方法调用路径内的操作以及#include <stdio.h> #include <stdlib.h> #define limit 1000000 /*size of integers array*/ void *malloc(size_t size) int main(){ unsigned long long int i, j; int *primes; int z = 1; int times; int counter; printf_s("Enter the limit: "); scanf_s("%d\n", &times); do (counter++) { primes = malloc(sizeof(int) * limit); for (i = 2; i < limit; i++) primes[i] = 1; for (i = 2; i < limit; i++) if (primes[i]) for (j = i; i * j < limit; j++) primes[i * j] = 0; printf("\nPrime numbers in range 1 to 100 are: \n"); for (i = 2; i < limit; i++) if (primes[i]) printf("%d\n", i); } while (counter <= times) return 0; }和关闭操作之间的差异。

我还制作了一个示例项目并在其中写了一个简单的解释，

https://github.com/li-xinyang/FE_Ember_Closure_Action

如何为我自己的组件创建操作

3 个答案: