19

ラベルタグの形式は次のとおりです。

<label for="id_of_text_field">
<input type="text" name="example" id="id_of_text_field" />

forラベルのidタグとテキストフィールドのタグが一致する必要がある場所。Ember.jsテンプレートでこれを機能させるための2つのアイデアがありました。

アイデア＃1：field_idとの両方で使用する名前の特別なバインディングを作成しようとしましlabelたTextField。私はこれを次のように実行しました：

<label {{bindAttr for="content.field_id"}}> {{content.label}}</label>
{{view Ember.TextField valueBinding="content.data" id="content.field_id"}}

残念ながら、label'sIDのみが正しくレンダリングされます。TextField'sidは正しくレンダリングされず、「metemorph...something-or-other」であることがわかります。

アイデア＃2：何らかの方法でTextFieldのIDを作成し、それをラベルタグに使用しますが、ある時点で、ラベルタグがレンダリングされたときにTextFieldのIDの準備ができていないのではないかと心配しています。TextField'sこれが問題ではなかったとしても、JSからIDを見つける方法がわかりません。

これはテンプレートに含まれているため、これらのラベルとテキストフィールドのペアが複数あります。

ラベルのタグをEmber.jsforのTextFieldのタグと一致させるにはどうすればよいですか？id

ありがとうございました！

アップデート

Peter Wagenetのアドバイスとわずかな修正を使用して、私は次のことを行いました。

<label {{bindAttr for="textField.elementId"}}> {{content.label}}</label>
{{view Ember.TextField valueBinding="content.value" viewName="textField"}}

この手法を使用すると、ユーザーはラベルをクリックして、TextFields、CheckBoxes、およびSelectsを選択できるようになります。

4

3 に答える 3

21

まず、Metamorphタグはラベルの値用です。フィールドのIDとは関係ありません。ただし、標準プロパティはプロパティパスに対して特別なことを行わないため、このコードは引き続き機能しません。この場合、の値idは文字通りcontent.field_idです。これは確かにあなたが望んでいたものではありません。elementIdBinding通常の状況では、 （idはの単なるエイリアスです）を使用できますがelementId、Emberビューの要素IDは作成後に変更できないため、ここではアプローチが機能しません。

viewName考えられる解決策の1つは、プロパティを利用することです。viewNameプロパティは、のビューへの名前付き参照を提供しますparentView。次に、次のようにします。

<label {{bindAttr for="view.textField.field_id"}}> {{content.label}}</label>
{{view Ember.TextField valueBinding="content.data" viewName="textField"}}
于 2012-05-06T05:05:51.223 に答える
5

これで常に問題が解決するわけではありませんが、for属性を完全に削除できるため、ラベル内に入力をネストするだけで便利な場合が多いことを付け加えたいと思います（参照）。

于 2012-05-08T23:16:08.280 に答える
1

しばらく前からこの問題に対する私の解決策は次のとおりです。

App.Widget.TextField = Em.ContainerView.extend({
    tagName: '',
    type: 'text',
    label: null,
    value: null,
    valueSize: '30px',

    childViews: ['labelView', 'inputView'],

    labelView: Em.View.extend({
        tagName: 'label',
        attributeBindings: ['for'],

        forBinding: 'parentView.inputView.elementId',

        init: function () {
            this.set('defaultTemplate', Em.Handlebars.compile(this.getPath('parentView.label')));
            this._super();
        }
    }),

    inputView: Em.TextField.extend({
        typeBinding: 'parentView.type',
        sizeBinding: 'parentView.valueSize',
        valueBinding: 'parentView.value'
    })
});

次に、ハンドルバーテンプレート内から：

{{view App.Widget.TextField label="Some Label"}}
于 2012-05-06T16:31:39.163 に答える