解析Ember fixture数据并使其可用于嵌套视图

时间:2014-04-15 16:05:16

标签: ember.js

我正在尝试将夹具数据提供给车把模板和嵌套视图。使用我当前的设置,数据到达我的车把模板就好了,但不是视图。我怀疑我错过了谜题的一些基本部分。有人请告诉我吗?

我已经问question一个类似的设置但是使用了ajax而不是fixture数据,但为了获得一些指导,我们进一步简化了我的设置。

谢谢!

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Ember Starter Kit</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/leaflet.css">
      <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
      <script type="text/x-handlebars">
        {{outlet}}
      </script>

      <script type="text/x-handlebars" id="index">
        {{view App.MapView id="map" contentBinding="this"}}
          <div id="blog">
            <ul>
                {{#each}}
                    <li>{{title}}</li>
                {{/each}}
            </ul>
          </div>
      </script>

      <script src="js/libs/jquery-1.10.2.js"></script>
      <script src="js/libs/handlebars-1.1.2.js"></script>
      <script src="js/libs/ember-1.5.0.js"></script>
      <script src="js/libs/ember-data.js"></script>
      <script src="js/libs/leaflet-src.js"></script>  
      <script src="js/app.js"></script>


    </body>
    </html>

    window.App = Ember.Application.create();

    App.ApplicationAdapter = DS.FixtureAdapter.extend();

    App.Router.map(function() {
      this.resource('index', { path: '/' });
    });


    App.IndexRoute = Ember.Route.extend({
      model: function () {
        return this.store.find('storyPrev');
      }
    });


    App.StoryPrev = DS.Model.extend({
      title: DS.attr('string')
    });

    App.StoryPrev.FIXTURES = [
     {
       id: 1,
       title: 'You Better Believe This!',
       coordinates: [-73.989321, 40.6778]
     },
     {
       id: 2,
       title: 'Holy Crap, Unreal!',
       coordinates: [-73.989321, 40.6779]
     },
     {
       id: 3,
       title: 'Big Bucks Made E-Z!',
       coordinates: [-73.989321, 40.6780]
     }
    ];

    App.MapView = Ember.View.extend({
        didInsertElement: function () {
            var map = L.map('map', {zoomControl: false}).setView([40.685259, -73.977664], 14);
            L.tileLayer('http://{s}.tile.cloudmade.com/[redacted key]/[redacted id]/256/{z}/{x}/{y}.png').addTo(map);
            L.marker([40.685259, -73.977664]).addTo(map);  


           console.log(this.get('content'));
    //THIS IS WHERE I GET STUCK



        }
    });

1 个答案:

答案 0 :(得分:0)

视图由控制器支持,因此您可以this.get('controller')获取由您的集合支持的控制器,如果您想获取集合(由于您可以迭代控制器,因此不需要)你可以做this.get('controller.model')

var controller = this.get('controller');
controller.forEach(function(item){
   console.log(item.get('title'));
});

http://emberjs.jsbin.com/OxIDiVU/373/edit