Question

我目前正在尝试使用Ember-data在Ember中动态生成表单。所需的表单字段取决于访问路径publishables/:publishable_id/edit时正在加载的可发布内容类型。

数据来源：

模型/ settings.js ：

import DS from 'ember-data';

var Settings = DS.Model.extend({
  type: DS.attr(),
  fields: DS.attr()
});

Settings.reopenClass({
  FIXTURES: [
    {
      id: 1,
      type: 'Gallery',
      fields: [
        {type: 'text', name: 'name', description: 'desc1'},
        {type: 'text', name: 'email', description: 'desc2'},
      ]
    },
    {
      id: 2,
      type: 'article',
      fields: [
        {type: 'text', name: 'name', description: 'desc1'},
        {type: 'textarea', name: 'notes', description: 'desc2'}
      ]
    }
  ]
});

export default Settings;

模型/ publishable.js ：

import DS from 'ember-data';

var Publishable = DS.Model.extend({
  title: DS.attr(),
  description: DS.attr(),

  authors: DS.hasMany('author', { async: true }),
  category: DS.belongsTo('category', { async: true }),

  published: DS.attr(),
  publish_from: DS.attr(),
  slug: DS.attr(),

  name: DS.attr(),
  fields: DS.attr(),

  contentType: DS.attr()
});

Publishable.reopenClass({
  FIXTURES: [
    {
      id: 1,
      title: 'How do I feed hamsters?',
      description: 'description 1',
      slug: 'derp',
      author: [
        {name: 'Tom Dale'}
      ],
      publish_from: "2014-07-14T23:11:48Z",
      question: 'Tomster cant eat using knife and a fork because his hands are too small. We are looking for a way to feed him. Any ideas?',
      contentType: {
        name: 'Gallery'
      },
      name: 'somedumname',
      email: 'herp@derp.com',
      passwordConfirmation: 'lolololololol',
      fields: { name: 'somedumname', email: 'herp@derp.com', passwordConfirmation: 'lolololololol' }
    }, {
      id: 2,
      title: 'Are humans insane?',
      description: 'description 2',
      author: 'Tomster the Hamster',
      date: '2013-02-02T12:00:00',
      question: 'I mean are totaly nuts? Is there any hope left for them? Should we hamsters try to save them?',
      contentType: {
        name: 'article'
      },
      fields: {name: 'hehehe', notes: 'lolololol'}
    }
  ]
});

export default Publishable;

例如，当访问pubishables/1/edit时，将根据App.Publishable.FIXTURE[:publishable_id].contentType.name === App.Settings.FIXTURE[:publishable_id].type生成表单。或者，由于当前可发布的内容类型为“图库”，因此将抓取fields基于Settings的{{1}}数据。

在Settings.type === 'Gallery'的情况下，需要生成两个输入：

/1/

如果输入类型为{type: 'text', name: 'name', description: 'desc1'}, {type: 'text', name: 'email', description: 'desc2'}，则说明为type，值为 App.Publishable.FIXTURE [：publishable_id] .field [App.Settings.FIXTURE [：publishable_id ]点域[I]。名称] 即可。或者在第一次输入的情况下，需要填充description。（或者在第二个输入App.Publishable.FIXTURE[:publishable_id].field.name）的情况下。

这是我一直在努力的部分。如何关联基于App.Publishable.FIXTURE[:publishable_id].field.email模型自动生成的字段以及Settings模型中的相应值。

目前我正在通过Publishable：

进行一些攻击

控制器/ publishables.js ：

PublishableController

我在哪里：

创建数组
创建临时对象
迭代设置模型并将其所有属性添加到临时对象
找出import Ember from 'ember'; export default Ember.ObjectController.extend({ needs: ['settings'], settings: Ember.computed.alias('controllers.settings.model'), formFields: function() { var modelFields = this.get('model.fields'); var settingsFields = this.get('settings.content')[0].get('fields'); // a bit of a hack, unsure how to do this better. var inputArray = []; for(var i = 0; i < settingsFields.length; i++) { var tmpObj = {}; for (var property in settingsFields[i]) { if (settingsFields[i].hasOwnProperty(property)) { tmpObj[property] = settingsFields[i][property] if(modelFields[settingsFields[i][property]]) { tmpObj['content'] = modelFields[settingsFields[i][property]]; } } } inputArray.push(tmpObj); } return inputArray; }.property(this) });和Settings.fields.name之间的关系，并将其作为'内容'在临时对象中键入
将temp对象推送到数组
返回新数组，以便我可以在视图中将其作为Publishable.fields[Settings.fields.name]

这可以创建具有{{#each formFields}}模型中适当值的表单。唯一的问题是我失去了Publishable模型的上下文。我不知道如何继续编辑输入值并将它们保存回模型。

以下是模板：

模板/可发布/ edit.hbs ：

Publishable

我在考虑根据<form> {{#each formFields}} {{input name=name type=type value=content}} {{description}} {{/each}} </form>做一个.set（）不同的输入值，但这看起来非常笨重。

是否有更好的方法将基于name的自动生成输入与Settings模型中的值相关联？或者有什么方法可以观察输入，所以当我在表单上点击提交我可以更新模型？

基于ember中的两种数据模型动态生成表单输入

0 个答案: