Question

我在EmberJS中有一个带有动作的搜索域，它将数据发送到API并接收多个项目。这些项目应该以列表的形式附加，并且 - 这里是我被卡住的地方 - 每个都有一个动作（在这种情况下：将项目添加到购物车）。

search.hbs

{{input valueBinding="model.domain"}}
<button {{action submitAction target="controller"}}>Check</button>

我的search_controller.js

中有类似的内容

success : function (returnData) {
                                $("#result").append('<li >' + 
                                    returnData.domain.name + '</li>')
                            },
                            error : function (xhr, textStatus, errorThrown) {

                            },
            })

我想要的是li有像

这样的动作

{{action 'addToCart'}}

应该调用该动作。但是如果我像这样插入它们

$("#result").append('<li ' + {{action "addToCart"}} + '>')

我收到意外令牌{错误。所以我的问题是，是否可以动态地将HTML添加到视图中，其中包含 Ember-actions？我猜Embers view.appendTo 是另一种可能性，但我不太清楚如何在这里使用它，因为现在我有一个for循环调用一个生成一个 li - 我是否必须为每个 li 生成一个视图？

Answer 1

可以将HTML动态添加到渲染视图中。无法动态地将未编译的{{action}}帮助器添加到渲染视图。如果需要事件处理以及添加的HTML，则需要使用原始js事件。虽然可以从原始js访问ember对象（请参阅此线程EmberJS Handling DOM Events using Views），但我建议上述问题使用ember对象属性和{{each}}帮助程序。

http://emberjs.jsbin.com/vosaxeze/1/edit

<强> HBS

<script type="text/x-handlebars" data-template-name="search">
<h2>this is search</h2>

<button {{action "submitAction" target="controller"}}>Check</button>
<ul id="result">
{{#each product in products}}
<li {{action "addToCart" product}} ><span>{{product.name}}</span></li>
{{/each}}
</ul>

</script>

<强> JS

App.SearchController = Ember.Controller.extend({
  products:[],
  actions:{
    addToCart:function(product){
      alert("addToCart:"+product.name);
    },
    submitAction:function(){
      var self = this;
      $.ajax({url:"",success:function(){
        var products = self.get("products");
        products.pushObject({id:1,name:"product1"});
        products.pushObject({id:2,name:"product2"});
        products.pushObject({id:3,name:"product3"});
        products.pushObject({id:4,name:"product4"});

      }});

    }
  }
});

动态添加列表元素以在ember中查看

1 个答案: