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 with working example：http://jsfiddle.net/dbERr/1/

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