Question

我正在尝试创建一个简单的页面，循环显示与联系人关联的电话号码列表。每个电话号码都有一个＆＃34;号码＆＃34;和＆＃34; phone_type＆＃34;。

我创建了一个扩展Ember.Select的视图，该视图使用phone_types列表填充自己。除此之外，它只是一个简单的Ember.Select：

export default Ember.Select.extend({

        thestore: '',
        optionLabelPath: 'content.code',
        optionValuePath : 'content.code',

    didInsertElement: function() {

        var vtype = this.get("valuetype");

        var vls =  this.get("thestore").filter('valuelist', { type: 'phone_type' }, function(vv) {
             return vv.get("type") == vtype;
        });

        this.set("content",vls);
    }
});

以下是模板中使用＆＃34; valuelist＆＃34;的代码。上面定义的视图。

    {{#each phonenumber in model}}
     <tr>
        <td>   {{phonenumber.number}}</td>
        <td>{{phonenumber.phone_type}}</td>
        <td>{{view 'valuelist' thestore=store  valuetype='phone_type' 
                selection="{{phonenumber.phone_type}}" 
                value="phonenumber.phone_type" }}</td>
     </tr>
{{/each}}

我无法弄清楚如何将下拉列表中的值绑定到我在模板中迭代的每个模型记录中的字段。您可以看到我在上面的代码中尝试了各种各样的东西而没有任何运气。

Answer 1

您需要的属性是value。但是，在您的上述尝试中，您使用文字字符串填充它。当您提供用引号括起的值时，会发生这种情况（＆＃39; ...＆＃39;或＆＃34; ...＆＃34;）。你需要的是给它一个identifier，它是没有引号的值。所以，试试这个：

{{#each phonenumber in model}}
 <tr>
    <td>{{phonenumber.number}}</td>
    <td>{{phonenumber.phone_type}}</td>
    <td>{{view 'valuelist' thestore=store  valuetype='phone_type' 
            value=phonenumber.phone_type }}</td>
 </tr>
{{/each}}

顺便说一句，这是一种非常不正统的做事方式。视图不应与商店绑定。此外，我认为这会导致您的选择在值异步加载时无法使用（如果出现错误，可能会导致应用程序崩溃）。

执行此操作的传统方法是在phone_type挂钩中加载所有setupController的列表，然后将其作为参数提供给选择视图。

<强>控制器：

App.MyRoute = Ember.Route.extend({
  //...
  setupController: function (c, m) {
    c.set("model", m);
    c.set("phoneTypes", [
      "home", "office"
      // or whatever, load it from store in model hook and setup here
    ]);
  }
});

<强>模板：

{{#each phonenumber in model}}
 <tr>
    <td>{{phonenumber.number}}</td>
    <td>{{phonenumber.phone_type}}</td>
    <td>{{view Ember.Select
          content=phoneTypes
          value=phonenumber.phone_type }}</td>
 </tr>
{{/each}}

Ember Ember。选择绑定

1 个答案: