Question

有没有人碰巧知道如何从服务器显示数据，现在我已经在这样的基本把手中显示相关模型

{{
           view Ember.Select
           prompt="Organization"
           contentBinding="organizations"
           optionValuePath="content.id"
           optionLabelPath="content.name"
           selectionBinding="selectedOrganization"
}}

但我需要创建一个有很多形式...我可以使用视图复制吗？ 使用视图甚至是正确的路径？！

 {{#each view.anotherField}}
              {{view Ember.TextField value=view.name}}
 {{/each}}

enter image description here

这是我表单的输出，你可以看到Organizatons表单加倍 JSbin http://jsbin.com/efeReDer/7/edit

今天我想出了这个......：D Kinda是为了这个目的吗？看起来很难看的 http://emberjs.jsbin.com/acUCocu/6/edit

基本上我做了一个空模型然后每个循环。在行动我“store.create”.empty记录到它。给我你的想法:) 还有一种方法可以使这些字段独立吗？在输入改变时不改变其内容。欢呼声，

克里斯蒂安

Answer 1

在这里，你可以找到一个可以解决的例子，我认为你在问什么

http://emberjs.jsbin.com/iPeHuNA/1/edit

<强> JS

试图将与应用模型相关的实体与它们的显示方式分开。修复一个将从服务器保存数据的余烬类App.Person。我没有使用过ember-data，但是如果需要的话，用ember-data表示法替换类很容易，用各自的商店调用替换伪ajax调用等。

App = Ember.Application.create();

App.Router.map(function() {
  this.route("persons");
});

App.IndexRoute = Ember.Route.extend({
  beforeModel: function() {
    this.transitionTo("persons");
  }
});

App.PersonsRoute = Ember.Route.extend({
  model:function(){
    return $.ajax({url:"/"}).then(function(){/*in url it is required to place the actual server address that will return data e.g. from a rest web service*/
      /*let's imagine that the following data has been returned from the server*/
      /*i.e. two Person entities have already been stored to the server and now are retrieved to display*/

      var personsData = [];
      var person1 = App.Person.create({id:1,fname:"Person1",lname:"First",genderId:2});
      var person2 = App.Person.create({id:2,fname:"Person2",lname:"Second",genderId:1});
      personsData.pushObject(person1);
      personsData.pushObject(person2);

      return personsData;
    });
  },
  setupController:function(controller,model){


   /*this could also be retrieved from server*/
    /*let's mimic a call*/
    $.ajax({url:"/",success:function(){

      /*This will run async but ember's binding will preper everything.If this is not acceptable, then initialization of lists' values/dictionary values can take place in any earlier phase of the app.  */

      var gendersData = [];
      gendersData.pushObject(App.Gender.create({id:1,type:"male"}));
    gendersData.pushObject(App.Gender.create({id:2,type:"female"}));

    controller.set("genders",gendersData);

    model.forEach(function(person){

      person.set("gender",gendersData.findBy("id",person.get("genderId")));


    });
    }});

    controller.set("model",model);
  }
});

App.PersonsController = Ember.ArrayController.extend({
  genders:[],
  actions:{
    addPerson:function(){
      this.get("model").pushObject(App.Person.create({id:Date.now(),fname:"",lname:""}));
    },
    print:function(){
      console.log(this.get("model"));
    }
  }
});

App.PersonFormView = Ember.View.extend({
  templateName:"personForm",
  /*layoutName:"simple-row"*/
  layoutName:"collapsible-row"
});

App.Person = Ember.Object.extend({
  id:null,                                
  fname:"",
  lname:"",
  gender:null
});

App.Gender = Ember.Object.extend({
  id:null,
  type:null
});

<强> HTML / HBS

创建了一个视图，负责处理每个App.Person实例的呈现方式。例如，partial和layouts已用于容纳引导程序样式，因为我注意到您在示例中使用了一些。

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Ember Starter Kit</title>
      <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    </head>
    <body>

      <script type="text/x-handlebars">
        <h2>Welcome to Ember.js</h2>

        {{outlet}}
      </script>

      <script type="text/x-handlebars" data-template-name="persons">
        {{#each person in this}}

        {{view App.PersonFormView}}

        {{/each}}
        <br/><br/>
        {{partial "buttons"}}
      </script>

      <script type="text/x-handlebars" data-template-name="_buttons">
        <button type="button" class="btn btn-primary" {{action "addPerson"}}>
      add
    </button>
    <button type="button" class="btn btn-primary" {{action "print"}}>
      print results to console
    </button>

      </script>

      <script type="text/x-handlebars" data-template-name="personForm">
      <div class="row">
      <div class="col-md-6 col-xs-5">
      <div class="form-group">
        <label>First Name</label>
        {{input class="form-control" placeholder="First Name" value=person.fname}}
        </div>
      </div>

      <div class="col-md-6 col-xs-5">
        <div class="form-group">
        <label>Last Name</label>
        {{input class="form-control" placeholder="Last Name" value=person.lname}}
        </div>
      </div>
      </div>
     <div class="row">
      <div class="col-md-2 col-xs-4">
      {{
               view Ember.Select
               prompt="Gender"
               content=controller.genders
               optionValuePath="content.id"
               optionLabelPath="content.type"
               selectionBinding=person.gender
               class="form-control"
            }}
      </div>
      </div>
      <!--</div>-->

      </script>

      <script type="text/x-handlebars" data-template-name="simple-row">
      <div class="row">
      {{yield}}
      </div>
      <br/><br/>
      </script>

      <script type="text/x-handlebars" data-template-name="collapsible-row">
        <div class="panel-group" >
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href=#{{unbound person.id}}>
              person:{{person.fname}}
            </a>
          </h4>
        </div>
        <div id={{unbound person.id}} class="panel-collapse collapse">
          <div class="panel-body">
            {{yield}}
          </div>
        </div>
      </div>
      </div>
      </br>
      </script>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
      <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
      <script src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"></script>

    </body>
    </html>

Ember - 从服务器到视图的数据检索？

1 个答案:

http://emberjs.jsbin.com/iPeHuNA/1/edit