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

How to switch a value from HTML variable inside a view from Ember.TextField?

本文关键字：HTML 变量 视图 Ember TextField      更新时间：2023-09-26

我一直想知道在Ember.js中如何更改HTML变量的值。我想做的是，当我点击编辑按钮时，我想更改只读的值，并使用视图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}}

您应该将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'}}

或者添加对全局重新打开CCD_ 1或CCD_。

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文档。

液压装置正确。此外，这里还有一个演示

只需提供attributeBindings: ["readonly"]，即可查看。而阿曲布特会对变化做出反应。

相关文章：