javascript - Ember Data 没有看到我的本地商店

Question

全面披露:我是 Ember 新手。

我已经启动了一个应用程序，当用户单击下一个按钮时，他们会创建客户模型的实例，并将该模型保存到本地存储中。在下一页上，我希望名字和姓氏都预先填充文本输入。我试图遵循 intro video但我遇到了一个问题。看来我正在创建对象，然后将其成功存储在本地存储中，但是当用户转换到下一页时，找不到模型。这是我的代码:

HTML:

<script type="text/x-handlebars">
    <div class="navbar navbar-inverse navbar-fixed-top">
          <div id="nobox" class="navbar-inner">
              <div class="container">
                  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </a>


              </div>

          </div>
      </div>

      <div class="container">

        {{outlet}}

        <footer>

        </footer>

      </div>
    </body>



  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <div class="container main-container" id="main">
                <div class="navbar">
                    <div class="navbar-inner">
                        <!--<div class="progress-bar-label-div">
                            Progress: 
                        </div>
                        <div class="progress-bar-div">
                            <div class="progress progress-striped">
                                <div class="bar" style="width:60%;"></div>
                            </div>
                        </div>-->
                        <div class="btn-group pull-right">
                            <a class="btn btn-primary" id="captcha" {{action 'create'}}>
                                Next
                            </a>

                        </div>
                    </div>
                </div>
                <div id="messages">

                </div>
                <div class="row top">
                    <div class="pull-left" >
                        <h3 class="purple">To start the process, please fill out the captcha below</h3>

                    </div>
                    <div class="pull-right">

                    </div>
                </div>
                <div class="well">
                    <div class="row">
                        <div class="pull-left questions">




                        </div>

                    </div>

                </div>
            </div>





            <hr>
  </script>


  <script type="text/x-handlebars" data-template-name="customer">

  <div class="container main-container" id="main">
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="btn-group pull-right">

                            {{#linkTo 'wsnum' action="create" classNames="btn btn-primary"}}Next{{/linkTo}}
                        </div>
                    </div>
                </div>
                <div id="messages">

                </div>
                <div class="row top">
                    <div class="pull-left">
                        <h3>Customer Information</h3>
                    </div>
                    <div class="pull-right">

                    </div>
                </div>
                <div class="row top">
                    <div class="pull-left">
                        <span class="red">*</span> = Denotes required field
                    </div>
                    <div class="pull-right form-inputs input-text">

                    </div>
                </div>
                <br>
                <div class="row-b">

                    <div class="control-group">
                        <label class="control-label" for="inputfname">First Name<span class="red">*</span>:</label>
                        <div class="controls">

                          {{view Ember.TextField valueBinding='model.first'}}
                        </div>
                      </div>
                </div>
                <div class="row-a">

                     <div class="control-group">
                        <label class="control-label" for="inputlname">Last Name<span class="red">*</span>:</label>
                        <div class="controls">

                          {{view Ember.TextField valueBinding='model.last'}}
                        </div>
                      </div>
                </div>

            </div>
                <input type="hidden" name="prev" value="">




            <hr>


  </script>

  <script type="text/x-handlebars" data-template-name="wsnum">

  <div class="container main-container" id="main">
                <div class="navbar">
                    <div class="navbar-inner">
                        <!--<div class="progress-bar-label-div">
                            Progress: 
                        </div>
                        <div class="progress-bar-div">
                            <div class="progress progress-striped">
                                <div class="bar" style="width:60%;"></div>
                            </div>
                        </div>-->
                        <div class="btn-group pull-right">
                            <!--<a class="btn" href="">
                                Prev
                            </a>
                            <a class="btn btn-primary" id="captcha">
                                Next
                            </a>-->
                            {{#linkTo 'customer' classNames="btn btn-primary"}}Prev{{/linkTo}}

                        </div>
                    </div>
                </div>
                <div id="messages">

                </div>
                <div class="row top">
                    <div class="pull-left" >
                        <h3>Choose the Number of Workstations or Point of Sale Accessories only</h3>
                    </div>
                    <div class="pull-right">

                    </div>
                </div>
                <div class="well">
                    <div class="row">

                        <div class="pull-left additional-questions">
                            How many workstations will you need?
                        </div>
                        <div class="pull-right input-text-well">

                        </div>
                    </div>
                </div>
                <div class="well">
                    <div class="row">
                        <div class="pull-left additional-questions">
                            Request Point of Sale Accessories only
                        </div>
                        <div class="pull-right radio-wsnum">
                            <label class="checkbox inline radio-new-pos">
                              <input type="checkbox" id="posonly1" name="posonly1" value="pos"> POS only
                            </label>
                        </div>
                    </div>
                </div>
            </div>





            <hr>


  </script>
  <script type="text/x-handlebars" data-template-name="overview">


  </script>
  <script type="text/x-handlebars" data-template-name="new">


  </script>

  <script type="text/x-handlebars" data-template-name="existing">


  </script>

还有我的 app.js:

App = Ember.Application.create();

App.store = DS.Store.create({
  revision: 12,
  adapter: DS.LSAdapter.extend()
});

App.Router.map(function() {
  // put your routes here
  this.route("customer", { path: "/customer" });
  this.route("wsnum", {path: "/wsnum"});
});

App.IndexRoute = Ember.Route.extend({

});
App.IndexController = Ember.Controller.extend({
  create: function(){
    var customer = App.Customer.createRecord({
      first:"ron",
      last:"testing"
    });
    console.log('Before the save');
    customer.save();
    console.log(customer.get('first'));
    this.transitionToRoute('customer');
  }
});
App.CustomerRoute = Ember.Route.extend({
    model: function() {
    var customer = App.Customer.find();
    console.log(customer.get('first'));
    return customer;
  }
});

App.WsnumRoute = Ember.Route.extend({

});

var attr = DS.attr;
App.Customer = DS.Model.extend({
  first: attr('string'),
  last: attr('string')
});

这是一个working example 。有什么想法吗？

Answer 1

在App.CustomerRoute.model()中，这一行:

var customer = App.Customer.find();

将 customer 变量设置为 find() 的结果。 find() 返回所有客户记录的数组。因此，当您在数组上调用 get('first') 时，它是未定义的，因为客户数组没有属性 first。

还有路线

this.route("customer", { path: "/customer" }); 

可能应该是:

this.route("customer", { path: "/customer/:customer_id" }); 

因为它似乎是为了显示一个客户而不是他们的列表。

经过此更改，根本不需要 CustomerRoute。所以应用程序看起来像:

App = Ember.Application.create();
App.store = DS.Store.create({
  revision: 12,
  adapter: DS.LSAdapter.extend()
});
App.Router.map(function() {
  this.route("customer", { path: "/customer/:customer_id" });
  this.route("wsnum", {path: "/wsnum"});
});
App.IndexController = Ember.Controller.extend({
  create: function(){
    var controller = this;
    var customer = App.Customer.createRecord({
      first:"ron",
      last:"harmon"
    });
    customer.save().then(function() {
      controller.transitionTo('customer', customer);
    });
  }
});

var attr = DS.attr;
App.Customer = DS.Model.extend({
  first: attr('string'),
  last: attr('string')
});

此处的工作示例:http://jsbin.com/itogeh/1/edit