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

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

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

有关更多详细信息，请参阅此API 文档

于 2013-07-30T14:37:31.583 回答
1

海德的回答是正确的。另外这里有一个Demo

只需将attributeBindings: ["readonly"], 提供给您的视图。并且该属性将响应变化。

于 2013-07-30T14:48:50.543 回答