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

Question

我有一个带有 EmberJS 操作的搜索字段，它将数据发送到 API 并接收多个项目。这些项目应该以列表的形式附加，并且 - 这就是我陷入困境的地方 - 每个项目都有一个操作(在本例中:将项目添加到购物车)。

搜索.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"}} + '>')

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

Answer 1

可以动态地将 HTML 添加到呈现的 View 中。无法将未编译的 {{action}} 帮助器动态添加到渲染 View 中。如果需要在添加 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"});

      }});

    }
  }
});