如何从Ember.TextField中查看视图中的HTML变量值？

Question

我一直在想如何在 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}}

Answer 1

您应该将readonly属性绑定到文本字段视图。

您可以通过创建扩展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支持文本字段的类型，值，大小，模式，占位符，禁用，maxlength和tabindex属性。如果需要支持更多属性，则必须执行上述操作之一。

有关详细信息，请参阅this API文档

Answer 2

Hyder的回答是正确的。此外，还有一个Demo

只需提供attributeBindings: ["readonly"]即可。 该属性将响应变化。