0

Ember.jsでHTML変数から値を変更する方法を知りたいと思っていました。私がやろうとしているのは、編集ボタンをクリックしたときに、 readonlyの値を変更し、ビュー Ember.TextField を使用してテキストフィールドで読み取り可能にしたいということです。

コードを以下に示します。

<div id="list_container">
    <h2>Contacts:</h2>
    <ul id="people_List">
    {{#each person in controller}}
     <li {{bindAttr class='isEditing:red'}}>
           <!-- here where Im trying to use the value to switch the value from a html variable -->
           {{view Ember.TextField valueBinding="person.name" readonly='isEditing'}}
           {{view Ember.TextField valueBinding="person.birthday" readonly='isEditing'}}
           {{view Ember.TextField valueBinding="person.telephone" readonly='isEditing'}}
           <button {{action edit}}>Edit</button>
           <button {{action details}}>Details</button>
           <button {{action remove}}>Remove</button>
     </li>
     {{/each}}
     </ul>
</div>

Schedule.PeopleController = Ember.ArrayController.extend({
    itemController: 'Person'
});

Schedule.PersonController = Ember.ObjectController.extend({
    isEditing: true,
    edit : function () {
        this.toggleProperty('isEditing');
        console.log(this.get('isEditing'));
    },
    details : function () {
        console.log("Details was clicked!!");
    },
    remove : function () {
        console.log("Remove was clicked!!");
    }
});

私は次の使用を避けています：

{{if}}
...HTML CODE...
{{else}}
...HTML CODE...
{{/if}}
4

2 に答える 2

3

readonly 属性を textfield ビューにバインドする必要があります。

これを行うには、Ember.TextField を拡張するカスタム テキストフィールド ビューを作成します。

Source.TextField = Ember.TextField.extend({
      attributeBindings: ["readonly"]
})

あなたのハンドルバーに

   {{view Source.TextField valueBinding="person.name" readonlyBinding='isEditing'}}
   {{view Source.TextField valueBinding="person.birthday" readonlyBinding='isEditing'}}
   {{view Source.TextField valueBinding="person.telephone" readonlyBinding='isEditing'}}

または サポートをグローバルに追加するには、 または を再度開きEmber.TextFieldますEmber.TextSupport。

Ember.TextSupport.reopen({
  attributeBindings: ["readonly"]
})

そしてあなたのハンドルバーに

{{view Ember.TextField valueBinding="person.name" readonlyBinding='isEditing'}}
{{view Ember.TextField valueBinding="person.birthday" readonlyBinding='isEditing'}}
{{view Ember.TextField valueBinding="person.telephone" readonlyBinding='isEditing'}}

実際

デフォルトでは、Ember.TextField は、テキスト フィールドの type、value、size、pattern、placeholder、disabled、maxlength、および tabindex 属性をサポートしています。さらに多くの属性をサポートする必要がある場合は、上記のいずれかを実行する必要があります。

詳細については、このAPI ドキュメントを参照してください

于 2013-07-30T14:37:31.583 に答える