将JSON objet中的图像插入手柄模板

时间:2016-04-05 20:04:39

标签: javascript jquery json ecmascript-6

我试图遍历电影对象并在dom中插入电影海报。我回来的一个对象的例子:

Object
   actors:          "Ryan Reynolds"
   created_at:      "2016-04-03T16:15:53.623Z"
   creator_id:       1
  poster: Object
    thumb: Object
      url:          "/uploads/movie/poster/2/thumb_a_deadpool.jpg"
    url:            "/uploads/movie/poster/2/a_deadpool.jpg"

我在这里迭代电影收藏:

let api_url = 'http://127.0.0.1:3000/movies' 

fetch(api_url).then(function(resp) {
  resp.json().then(function(movies) {
    console.log(movies)
    let tmpl = Handlebars.compile(eachMovietmpl)
      for (let movie of movies) {
        let moviePoster = $('#movie_poster').html(movie["poster"]["thumb"].url)
        let title = $('#movie_title_main_page').html(movie.title)
        let html = tmpl(movie)
        $('#now_playing_section').append(html)
      }
  })
}) 

该行:

let title = $('#movie_title_main_page').html(movie.title) 

正常工作,因为每个电影标题都插入到相应元素的dom中。当我尝试用海报做同样的事情时,我只得到一个插入dom的网址。似乎没有迭代电影海报。我也试过了

let moviePoster = $('#movie_poster').html(movie.poster.thumb.url) 

也没有做任何事情。这是把手模板:

<div id="movie_poster_wrapper">
  <p id="movie_title_main_page">{{title}}</p>
  <p id="movie_poster"><img src="{{moviePoster}}"></p>
  <p id="movie_poster_release">{{movieRelease}}</p>
</div>

0 个答案:

没有答案