javascript - EmberJs - 使用模板绑定值时出现问题

Question

模型数据未正确绑定模板。我看到的是这样的结果，而不是实际值。

我为此创建了jsFiddle。这样你就可以查了。点击“性别”/“婚姻状况”获得以上结果。

路由器：

App.FieldRoute = Ember.Route.extend({
  setupController: function(controller, Field) {
    controller.set('model', App.Fields);
  }
});

模板：

<script type="text/x-handlebars" id="field">  
    {{#each model}}
    <div>
       <input type="text" style="margin: 10px" placeHolder="Key" value="{{key}}"/>
       <input type="text" style="margin: 10px" placeHolder="Desc" value="{{desc}}"/>
       <i class="icon-trash"></i>
    </div>    
    {{/each}}
</script>

Answer 1

您需要使用Ember.Textfield

<script type="text/x-handlebars" id="field">  
    {{#each model}}
    <div>
       {{view Ember.TextField  placeHolder="Key" valueBinding="key"}}
       {{view Ember.TextField  placeHolder="Desc" valueBinding="desc"}}
       <i class="icon-trash"></i>
    </div>    
    {{/each}}
</script>

Answer 2

您不能使用{{key}}和{{desc}}内部元素属性。此处描述的绑定元素属性的正确方法http://emberjs.com/guides/templates/binding-element-attributes/。

使用正确语法的模板如下：

模板：

<script type="text/x-handlebars" id="field">  
    {{#each model}}
        <div>
            <input type="text" style="margin: 10px" placeHolder="Key" {{bindAttr value="key"}}/>
            <input type="text" style="margin: 10px" placeHolder="Desc" {{bindAttr value="desc"}}"/>
            <i class="icon-trash"></i>
        </div>    
    {{/each}}
</script>

带有工作示例的 jsFiddle：http: //jsfiddle.net/dbERr/1/

您也可以使用内置视图Ember.TextField，但它支持您可以指定的有限数量的属性。例如，它不支持style开箱即用的属性。