Javascript 带有ID后缀的自定义文本框视图

让我们假设我有这个余烬。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}}

应将其表述为：

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

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

请尝试以下操作

在控制器上，只需添加：

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

然后将输入标记写为：

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

---

您应该使用绑定属性帮助器

车把

控制器

idFormat:function（id）{
返回“项目-”+id；
}

哦，虽然上述方法解决了您的直接问题，但您可能希望根据您的操作使用输入帮助程序

---

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

车把：

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

---

您是否考虑过/尝试过在控制器上编写一个函数，或将其作为一个自定义把手助手，将您的id转换为所需的语法？然后可以将输入定义为：

@gravityplanx，看起来很有趣。你能给我指一些网站或提供这样的函数的例子吗？我将提供一个答案，并给出我将使用的代码。控制器函数如何获取id参数？通常它将来自将在ControllerNameOuter类中设置的模型。我上面的例子有点不完整——我可能会使用属性（“id”）来监视它，而不是像在您的解决方案中那样将其传递进来——我只会在控制器中而不是在模型中执行。

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

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

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

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")
});