个人中心
gpt4 book ai didi

javascript - Ember - 将数据从服务器检索到 View ？

转载 作者：行者123 更新时间：2023-11-28 01:41:15 27 4
gpt4 key购买 nike

有谁知道如何显示来自服务器的数据，现在我一直在像这样的基本 Handlebars 中显示相关模型

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

但是我需要创建一个有多种形式的...我使用 View 复制吗？ 使用 View 是正确的道路吗？!

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

enter image description here

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

今天我想出了这个...:D 有点达到目的吗？看起来很难看<强> http://emberjs.jsbin.com/acUCocu/6/edit

基本上我做了一个空模型，然后每个循环。在操作中我“store.create”.empty记录到它。告诉我你对此的想法:)还有没有办法让这些字段独立？当输入更改时，无需更改其内容。干杯，

克里斯汀

最佳答案

在这里你可以找到一个我认为你要问的例子

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

js

尝试将与应用程序模型相关的实体与其显示方式分开。创建了一个 ember 类 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

创建了一个 View ，负责处理每个 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>

关于javascript - Ember - 将数据从服务器检索到 View ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20900190/

27 4 0
文章推荐： C++ SWAP 函数什么都不做？
文章推荐： python - 使用 Flask (Python) 从 mjpeg-streamer 流式传输相机提要
文章推荐： c++ - 迭代定义为 typedef C++ 的 vector
文章推荐： html - Tab 键未捕获 ng-click
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com