AmpersandJs：渲染子视图

Question

进入 AmpersandJs，并通过不弄清楚为什么我的子视图表单不呈现它的标记而大放异彩。

我的 MainView.render，工作正常：

render: function() {
  BaseView.prototype.render.apply(this, arguments);
  this.collectionView = this.renderCollection(this.collection, HSEventView, '.item-container');

  this.renderSubview(new HSEventEditView({
    action: 'create'
  }), '.create-event');

  return this;
},

接下来，我的 SubView.render (HSEventEditView):

render: function () {
  this.renderWithTemplate();

  this.form = new EditForm({
    el: this.query('.edit-form'),
    submitCallback: function (data) {
      debug('submit', data);
    }
  });

  this.registerSubview(this.form);
  debug('render.form.el', this.form.el)
}

最后是我的 FormView:

module.exports = FormView.extend({
  initialize: function() {
    debug('initialize', this.el)
  },

  autoRender: true,

  fields: function () {
    debug('fields!')


    var fields = [
      new InputView({
        label: 'Name',
        name: 'name',
        value: utils.getDotted(this, 'model.name'),
        placeholder: 'Name',
        parent: this
      })
    ];

    debug('fields', fields)
  }
});

MainView 和 SubView 呈现良好，但 'div.edit-form' DOM 节点（表单标记所在的位置）为空。

我已经尝试了包括我可以挖掘的子视图的所有变体，但显然我对某些事情视而不见。

谢谢！

PS！这是呈现的标记：

<section class="page">
  <h2>Events collection</h2>
  <hr>
  <div class="tools">(Tools comming...)</div>
  <hr>
  <div class="item-container events">
    <div class="item event">
      <h3>Event: <span data-hook="name">Event 1</span></h3>
    </div>
  </div>
  <hr>
  <div class="create-event">
    <div class="item event">
      <h3>Create event: <span data-hook="name"></span></h3>        
      <div class="edit-form"></div>
    </div>
  </div>
</section>

Answer 1

由于 fields 是一个函数，您需要 return 字段。在你的 Formview:

fields: function () {
  debug('fields!')


  var fields = [
    new InputView({
      label: 'Name',
      name: 'name',
      value: this.model.name,
      placeholder: 'Name',
      parent: this
    })
  ];

  debug('fields', fields)

  // need to return the fields you've declared
  return fields;
}

AmpersandJs：渲染子视图

AmpersandJs: Render sub-view

forms

subview

ampersand.js