Question

让我们假设我有这个Ember.ArrayController：

App.ItemsArrayController = Ember.ArrayController.extend({
    //some additional functions
}).create()

此数组控制器包含以下对象：

App.Item = Ember.Object.extend({
   id: 0, //after item is loaded this id contains real id of item
   value: "some value"
})

在车把模板中我得到了：

{{#each item in App.ItemsArrayController}}
   <input id="item" valueBinding="item.value" />
{{/each}}

您可以看到，根据控制器中的项目数生成x次。这个问题是所有这些输入具有相同的ID＆＃34; item＆＃34;。我不能使用类似的东西：

<input id="item-{{item.id}}" valueBinding="item.value" />

因为句柄{{}}将值包装到ember metamorph脚本包装器中，句柄{{{}}}的工作方式相同。

我想要做的是我可以使用的自定义视图：

{{view App.TextFieldWithIdSuffix id="item-" idSuffixBinding="item.id" valueBinding="item.value"}}

，它应该呈现为：

<input type="text" id="item-0" value="some text" />

我的观点App.TextFieldWithIdSuffix定义为：

App.TextFieldWithIdSuffix = Ember.View.extend({
   tagName: "input"
});

如何定义App.TextFieldWithIdSuffix视图以支持xxxBindings属性，并在呈现时使用后缀更改id？

Answer 1

请尝试以下操作。

在您的控制器上，只需添加：

idFormat: function(id) {
    return "item-" + id;
}

然后将输入标记写为：

<input id={{idFormat item.id}} valueBinding"item.value" />

Answer 2

你应该使用bind-attr helper

http://emberjs.com/guides/templates/binding-element-attributes/

车把

<input type="text" {{bind-attr id="idFormat" }} value="some text" />

控制器

idFormat: function(id) { return "item-" + id; }

哦，虽然以上解决了您的直接问题，但您可能希望根据您的操作使用输入助手。

http://emberjs.com/guides/templates/input-helpers/

Answer 3

我最终得到了这个解决方案：计算文本框ID被移动到Item模型。

车把：

<input {{bind-attr id="item.textboxId"}} 
       type="text" {{bind-attr value="item.value"}} />

Ember模特：

App.Item = Ember.Object.extend({
   id: 0, //after item is loaded this id contains real id of item
   value: "some value",
   textboxId: function () {
       return "item-" + this.get("id");
   }.property("id")
});

EmberJS自定义文本框视图，带ID后缀

3 个答案: