Question

我正在尝试创建一个模块化的表格形式，它接受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>

Answer 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/

Ember表格形式，包含行的对象和列的属性名称

视图

模板

1 个答案: