event-handling - ember.js：如何使用视图删除记录

Question

在 ember 的官方指南中，他们说可以使用视图删除记录，但他们没有提供如何执行此操作的示例。我无法理解视图如何获取对象的 ID 并进行破坏。也许我不明白视图的目的是什么？我认为它是一个事件处理程序（但我有时会看到它用于渲染大块 hbl ......也许这就是我感到困惑的原因）

是否有任何地方删除整个过程的示例？

谢谢你

Answer 1

通常，您要做的是{{action}}在您的视图中创建一个将事件发送到实际处理它的位置：控制器或路由。（就我而言，两者都有一点）

---

注意：通常，您不需要View为模板编写类，除非视图需要特定的事件处理程序。Ember即时生成通用视图。您可以通过以下方式看到这一点{{log view}}：

<script type="text/x-handlebars" data-template-name="app">
    {{log view}}
</script>

如果您查看控制台，您会发现模板app与视图类相关联：

---

例如，在下面的视图模板中，我定义了一个“删除”按钮，它将触发remove控制器中的操作。

<script type="text/x-handlebars" data-template-name="product/remove"> 
    <fieldset>
        <legend>Remove</legend>
        <div class="row-fluid">
            Are you sure you want to delete <strong>{{content.name}}</strong>?
        </div>
    </fieldset>
    <ht />
    {{#linkTo products class="btn"}}Back to List{{/linkTo}}
    <button {{action remove target="controller"}} class="btn btn-danger">
        Delete
    </button>
</script>

控制器只需获取content属性并发出触发confirmRemove事件的信号，并将其content作为参数传递

App.ProductRemoveController = Em.ObjectController.extend({
    remove: function() {
        this.get('target').send('confirmRemove', this.get('content'));    
    }
});

路线实际上是这样处理的：

App.ProductRemoveRoute = Em.Route.extend(App.NotifyHandler, {
    setupController: function(controller, model) {
        var c = this.controllerFor('product');
        controller.set('content', c.get('content'));
    },
    events: {
        confirmRemove: function(record) {
            record.deleteRecord();

            // should commit here
            // this.get('store').commit();

            this.controllerFor('application').set(
                'notification', 'Product has been removed'
            );
            this.transitionTo('products');
        }
    }
});

（见小提琴）

如果您想直接在 Route 中处理事件，而不与控制器对话，在您的视图模板中，您只需省略target="controller"，框架将在控制器中查找该事件的处理程序，如果没有找到，它会在路线中查找。在这种方法中，如果需要任何参数，您必须通过 Handlebars 传递事件参数。在这种情况下，我知道它this代表该content模板中的 ：

<script type="text/x-handlebars" data-template-name="product/remove"> 
    <fieldset>
        <legend>Remove</legend>
        <div class="row-fluid">
            Are you sure you want to delete <strong>{{content.name}}</strong>?
        </div>
    </fieldset>
    <ht />
    {{#linkTo products class="btn"}}Back to List{{/linkTo}}
    <button {{action confirmRemove this}} class="btn btn-danger">
        Delete
    </button>
</script>

使用这种方法，您无需在控制器中定义任何内容，因为它将直接在路由中触发事件：

App.ProductRemoveController = Em.ObjectController.extend();

（见小提琴）

---

更新：为了在对象控制器中处理事件，itemController属性必须指定一个控制器，它应该扩展Em.ObjectController：

Depot.TransportDocumentsController = Ember.ArrayController.extend
    itemController: 'transportDocument'

Depot.TransportDocumentController = Ember.ObjectController.extend
    removeItem: ->
        alert("aoooo")

在模板中唯一会改变的是itemController在{{each}}帮助器中提到的：

{{#each doc in controller itemController="transportDocument"}}
    {{doc.number}}
    <!-- rest of the template removed to make this short. -->
    <button {{action removeItem}} class='btn btn-danger btn-small'>
        <i class="icon-white icon-remove"></i>
    </button>
{{/each}}

在操作中，您无需说明处理程序的位置，因为框架可以自己找到目标。

（见小提琴）