Question

我想知道是否有人能给我简短的指示。我正在创建一个应用程序，我希望能够在应用程序（CRUD）中的任何地方记笔记。我使用{{render}}在我的应用程序控制器中渲染我的演示文稿但我不确定如何将完整的crud操作放在那里。这就是我到目前为止所做的：

- 演示控制器

import Ember from 'ember';

var PresentationController = Ember.ObjectController.extend({
  actions: {
    edit: function () {
      this.transitionToRoute('presentation.edit');
    },
    save: function () {
      var presentation = this.get('model');
      // this will tell Ember-Data to save/persist the new record
      presentation.save();
      // then transition to the current user
      this.transitionToRoute('presentation', presentation);
    },
    delete: function () {
      // this tells Ember-Data to delete the current user
      this.get('model').deleteRecord();
      this.get('model').save();
      // then transition to the users route
      this.transitionToRoute('presentations');
    }
  }
});

export default PresentationController;

- 演示控制器

import Ember from 'ember';

var PresentationsController = Ember.ArrayController.extend({
  actions: {
    sendMessage: function ( message ) {
      if ( message !== '') {
        console.log( message );
      }
    }
  }
});

export default PresentationsController;

- 型号

import DS from 'ember-data';

var Presentation = DS.Model.extend({
    title: DS.attr('string'),
    note: DS.attr('string')
});

- 演示路线

import Ember from 'ember';

var PresentationsRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('presentation');
  }
});

export default PresentationsRoute;

- 演示路线

import Ember from 'ember';

var PresentationRoute = Ember.Route.extend({
  model: function (params) {
    return this.store.find('presentation', params.id);
  }
});

export default PresentationRoute;

- 申请路线

import Ember from 'ember';

export default Ember.Route.extend({
  model: function () {
    return this.store.find('category');
  },
  setupController: function (controller, model) {
    this._super(controller, model);
    controller.set('product', this.store.find('product'));
    controller.set('presentation', this.store.find('presentation'));
  }
});

- 申请HBS

<section class="main-section">
      <div id="main-content">
        {{#link-to "presentations.create" class="create-btn expand" tagName="button"}} Add presentation {{/link-to}}
        {{render 'presentations' presentation}}
        {{outlet}}
      </div>
  </section>

- 演示文稿HBS

{{#each presentation in controller}}
    {{#link-to 'presentation' presentation tagName='li'}}
      {{presentation.title}}
    {{/link-to}}
{{/each}}

{{outlet}}

- 演示文稿HBS

{{outlet}}
<div class="user-profile">
  <h2>{{title}}</h2>
  <p>{{note}}</p>
  <div class="btn-group">
    <button {{action "edit" }}>Edit</button>
    <button {{action "delete" }}>Delete</button>
  </div>
</div>

Answer 1

基本上你所描述的是一种形式。无论您正在查看哪个页面（路线），都可以访问它，并且您将能够在此模式中执行操作（创建注释，编辑注释，删除注释等），而不会留下或影响当前页面在后台显示。从本质上讲，这意味着您应该单独留下路由器，因为路由器控制着当前页面，并且您不想影响它。您不希望进行任何{{#link-to}}或transitionTo或transitionToRoute来电，也不希望任何与演示相关的路线或网点。

相反，您将不得不处理控制器和视图级别的所有内容。这是组件真正派上用场的地方，因为如果正确使用它们，它们对于封装非常有用。在presentations.hbs中，我使用组件来表示每个演示文稿：

{{#each presentation in controller}}
  {{individual-presentation presentationModelBinding="presentation"}}
{{/each}}

请注意，您需要一个扩展IndividualPresentationComponent的相应Ember.Component对象。更进一步，在个人presentation.hbs中，我有类似于你现在的代码，但有各种CRUD操作的允许：

{{#if editing}}
  {{input value=presentationModel.title}}
  {{textarea value=presentationModel.note}}
{{else}}
  <h2>{{title}}</h2>
  <p>{{note}}</p>
{{/if}}
<div class="btn-group">
  {{#if editing}}
    <button {{action "save" }}>Save</button>
  {{else}}
    <button {{action "edit" }}>Edit</button>
  {{/if}}
  <button {{action "delete" }}>Delete</button>
</div>

请注意，组件模板的上下文是组件本身，而不是其他控制器。同样，在组件模板内部触发的操作也直接指向组件的actions哈希。所以你的IndividualPresentationComponent需要看起来像这样：

IndividualPresentationComponent = Ember.Component.extend({
  classNames: ['user-profile'],

  actions: {
    save: function () {
      this.sendAction('save', this.get('presentationModel'));
      this.set('editing', false);
    },

    edit: function () {
      this.set('editing', true);
    },

    delete: function () {
      this.sendAction('delete', this.get('presentationModel'));
    }
  }
});

请注意我在这里使用sendAction。这就是组件与外界沟通的方式。要使其工作，请返回presentation.hbs并拦截这样的操作：

{{#each presentation in controller}}
  {{individual-presentation presentationModelBinding="presentation"
                            save="savePresentation"
                            delete="deletePresentation"}}
{{/each}}

这里你基本上说如果组件发送＆＃34; save＆＃34;动作，你想用你的控制器处理它＆＃34; savePresentation＆＃34;动作，如果组件发送＆＃34;删除＆＃34;动作，你想用你的控制器处理它＆＃34; deletePresentation＆＃34;行动。所以你的presentation-controller.js需要实现这些行动：

var PresentationsController = Ember.ArrayController.extend({
  actions: {
    savePresentation: function (presentationModel) {
      ...
    },

    deletePresentation: function (presentationModel) {
      ...
    },
  }
});

您可以删除PresentationController，因为它的所有功能现在都由您的IndividualPresentationComponent和PresentationsController直接处理。

全球CRUD Ember.js

1 个答案: