기본 Ember.js 라우팅 및 데이터로드

끊임없이 변화하는 Ember.js의 세계에서 간단한 애플리케이션을 시작하고 실행하는 데 도움이 필요합니다.기본 Ember.js 라우팅 및 데이터로드

Ember.js가 포함 된 API를 통해 JSON을 통해 데이터를로드하기위한 기본 프레임 워크를 다운로드하려고하지만 데이터가 표시되는 데 문제가 있습니다. 코드는 여기에서 찾을 수 있습니다 :

var App = Ember.Application.create(); 

App.ApplicationController = Ember.Controller.extend(); 
App.ApplicationView = Ember.View.extend({ 
    templateName: 'application' 
}); 

App.Movie = Ember.Object.extend({ 
    title: null, 
    rating: null, 
    release_date: null, 
    poster_image: null 
}); 

App.MoviesView = Ember.View.extend({ 
    templateName: 'movie-list' 
}); 

App.moviesController = Ember.ArrayController.create({ 
    content: [], 
    init: function(){ 
     var me = this; 
     $.getJSON('/trailers/api/movies',function(data){ 
      me.set('content', []); 
      $(data.movies).each(function(index,value){ 
       var t = App.Movie.create({ 
        title: value.title, 
        rating: value.rating, 
        release_date: value.release_date, 
        poster_image: value.poster_image 
       }); 
       me.pushObject(t); 
      }) 
     }); 
    } 
}); 

App.router = Ember.Router.create({ 
    enableLogging: true, 
    root: Ember.Route.extend({ 
     index: Ember.Route.extend({ 
      route: '/', 
      redirectsTo: 'movies' 
     }), 
     movies: Ember.Route.extend({ 
      route: '/movies', 
      connectOutlets: function(router) { 
       return router.get('applicationController').connectOutlet({ 
       viewClass: App.MoviesView, 
       controller: App.moviesController 
       }); 
      } 
     }) 
    }) 
}); 

App.initialize(App.router);

<script type="text/x-handlebars" data-template-name="application"> 
    <h1>Application</h1> 
    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="movie-list"> 
    <h2>Movie List</h2> 
    <ul> 
    {{#each App.movieController}} 
    <li><a {{action showMovie context="movie" href=true}}>{{title}}</a></li> 
    {{/each}} 
    </ul> 
</script>

http://jsfiddle.net/qmZrT/

템플릿 부하 제대로 나는 "응용 프로그램"과 "영화 목록"헤더,하지만 정렬되지 않은 볼 수 있다는 점에서 목록이 데이터로 채워지지 않습니다.

콘솔에 오류가 발생하지 않고 XML 요청이 올바르게 반환되고 App.moviesController.content를 입력하면 API의 데이터가 포함 된 것으로 보이는 "클래스"배열이 나타납니다. .

누구든지 의견이나 조언을 제공 할 수 있습니까?

출처

2012-08-12 Matt M

는 스크립트

당신이 라이브러리를로드하는주문에 몇 가지 문제가 있습니다 : 그것은 이 엠버 전에로드해야하므로 엠버는 핸들에 따라 달라집니다. 주문을 변경했습니다.

복수 컨텍스트를 지원하기 위해 {{action}} 도우미가 변경되었습니다 : this을 읽습니다. 또한 moviesController의 인스턴스를 반복하려고 시도하지만 Router을 사용하고 있으므로 controller을 반복하고 moviesController을 connectOutlets에 삽입해야합니다.

AJAX 호출은 명백한 이유로 JSFiddle에서 작동하지 않습니다. 가리키는 URL이 환경에 있고 JSFiddle에서 해당 값을 누를 수 없습니다. 내가 수집 한 데이터를 수동으로 추가하여 실행중인 것을 보았습니다. JSFiddle Demo

편집 : 질문에 명시된 달리

, 당신이 콘솔에서 오류가 발생할 수 할 :

Uncaught Error: <.ApplicationView:ember158> - Unable to find template "application".

이 여기

는 코드의 수정 된 버전입니다 어설 션을 사용하여 스크립트 (핸들 바 및 엠버)를 추가 한 순서로 문제를 찾는데 도움이되었습니다. 그는 템플릿 이름이 정확했기 때문에 뷰에 표시된 이름과 일치 했으므로 문제가 다른 곳에서 발생해야했습니다. JSFiddle의 "Manage Resources"탭에서 Handlebars 전에 Ember를로드했는데 큰 차이가 있음을 알았습니다.

출처

2012-08-12 05:59:05 MilkyWayJoe

환상적인! 매력처럼 일했습니다. 도와 주셔서 정말 감사합니다. –

환영합니다, 도움이 된 것을 기쁘게 생각합니다. – MilkyWayJoe

기본 Ember.js 라우팅 및 데이터로드

답변

관련 문제