0

1) オブジェクトの配列 (行) と 2) それらのオブジェクトのプロパティ名の配列 (列) の入力を取るモジュール式の表形式を作成しようとしています。これら 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 に答える