0

我正在尝试创建一个模块化表格形式，其输入为 1）对象数组（行）和 2）这些对象的属性名称数组（列）。通过这两个数组，它应该检索到可以通过 Ember.TextFields 在表单中修改的属性。

我无法弄清楚如何做到这一点。我可以检索属性的值（如下面的代码所示），但它们是原始值，而不是引用，因此对这些的绑定不会更新对象的属性。

看法

App.SomeTabularForm = Em.View.extend({
  template: <see below>,

  things: [
    Em.Object.create({ foo: 'a', bar: 'b' }), 
    Em.Object.create({ foo: 1, bar: 2 })
  ],
  fieldNames: ['bar', 'foo'],

  thingsWithFields: function() {
    var fieldNames = this.get('fieldNames');

    var thingWithFieldsProxy = Em.ObjectProxy.extend({
      fields: function() {
        var thing = this;

        return fieldNames.map(function(fn) {
          // FIX: this returns a raw value which is not bindable in a template
          return thing.get(fn);
        });
      }.property()
    });

    return this.get('things').map(function(t) {
      return thingWithFieldsProxy.create({ content: t });
    });
  }.property('things.[]', 'fields.[]')
});

模板

<table>
  <tr>
    {{#each view.fieldNames}}
      <th>{{this}}</th>
    {{/each}}
  <tr>

  {{#each view.thingsWithFields}}
    <tr>
      {{#each fields}}
        <td>
          {{! FIX: does not actually bind to thing's property }}
          {{input type="text" valueBinding="this"}}
        </td>
      {{/each}}
    </tr>
  {{#each}}
</table>
4

1 回答 1

1

您需要指定模板名称，

App.SomeTabularForm  = Em.View.extend({
  templateName: "mytemp",
....

模板

<script type="text/x-handlebars" data-template-name="mytemp">
    {{blah}}
    <table>
  <tr>
    {{#each view.fieldNames}}
      <th>{{this}}</th>
    {{/each}}....

http://jsfiddle.net/EdWG3/3/

如果要使用模板属性，

App.SomeTabularForm  = Em.View.extend({
    template: Em.Handlebars.compile("<div>{{#each field in view.fieldNames}}{{field}}<br/>{{/each}}</div>"),

  things: [...

http://jsfiddle.net/EdWG3/4/

如果你在路由的上下文中使用它，那么你需要修改视图的名称， http://jsfiddle.net/EdWG3/2/

编辑

为了绑定到代理对象

模板需要修改如下，

{{#each view.thingsWithFields}}
    <tr>

        <td>
          {{! FIX: does not actually bind to thing's property }}
          {{input type="text" valueBinding="content.bar"}}{{input type="text" valueBinding="content.foo"}}
        </td>

    </tr>
      {{/each}}

http://jsfiddle.net/EdWG3/7/

于 2013-10-15T08:50:55.103 回答