如何从 Ember.TextField 的视图中切换 HTML 变量的值？答案

【问题标题】：How to switch a value from HTML variable inside a view from Ember.TextField?如何从 Ember.TextField 的视图中切换 HTML 变量的值？
【发布时间】：2013-07-30 13:46:22
【问题描述】：

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

【问题讨论】：

标签： javascript html user-interface ember.js

【解决方案1】：

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

您可以通过创建扩展 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 属性。如果您需要支持更多属性，则必须执行上述操作之一。

更多详情请参阅this API 文档

【讨论】：

On readonlyBinding='isEditing' 是否可以反转作为参数传递的值？我一直在想这样的事情：readonlyBinding='#not isEditing'
我不确定，如果有这样的事情，但你可以在你的 itemController 中有一个计算属性，它将返回 isEditing 的协商，观察 isEditing，如isNotEditing: function(){return !this.get('isEditing')}.property('isEditing') 并将其作为绑定到只读，如readonlyBinding='isNotEditing'

【解决方案2】：

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

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

【讨论】：