Question

进入AmpersandJs，并且没有弄清楚为什么我的子视图形式没有呈现它的标记而有一个大的showstop。

我的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是一个函数，您需要返回字段。在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：渲染子视图

1 个答案: