Ember.js沒有將數據發送到Rails應用程序中的模板/視圖

Question

我在學習時正在學習Ember.js ，我想做的就是將其集成到Rails應用程序（香草應用程序，只是為了玩轉），因為大多數時候我都在使用Rails。 到目前為止，我已經成功安裝了它（我正在使用ember-rails ），但是我遇到了一個小問題，即使我在那里看了（我想）每一個有關Ember和Rails的教程，也似乎無法弄清楚。 。

因此，問題是我無法使路由器將任何類型的數據傳遞給視圖/模板。 我什至在那里硬編碼了一個JSON對象（並且不依賴適配器），以查看它是否有效，但是沒有成功。 因此，我的代碼如下所示：

Rails Gemfile Gemfile ：

ruby "1.9.3"

gem 'rails', '3.2.16'
gem 'sqlite3'
gem 'jquery-rails'
gem 'ember-rails'
gem 'ember-source'
gem 'pg'

group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  gem 'therubyracer', :platforms => :ruby

  gem 'uglifier', '>= 1.0.3'
end

Rails控制器app/controllers/users_controller.rb ：

class UsersController < ApplicationController
  def index
    @a_users = User.all

    respond_to do |format|
      format.html
      format.json {render :json => @a_users}
    end
  end
end

Rails模型app/models/users.rb ：

class User < ActiveRecord::Base
  validates :first_name, :presence => true
  validates :last_name, :presence => true
end

Rails序列化器app/serializers/user_serializer.rb ：

class UserSerializer < ActiveModel::Serializer
  attributes :first_name, :last_name
end

Rails路由config/routes.rb

NewEmberOnRails::Application.routes.draw do
  root :to => 'home#index'
  resources :users
end

這幾乎涵蓋了Rails部分。 如果我訪問localhost:3000/users.json得到一個格式良好的JSON對象（考慮到數據庫中有John Doe用戶）： {"users":[{"first_name":"John","last_name":"Doe"}]}

我編寫的Ember.js部分如下：

灰燼商店app/assets/javascripts/store.js

NewEmberOnRails.Store = DS.Store.extend({
  // Override the default adapter with the `DS.ActiveModelAdapter` which
  // is built to work nicely with the ActiveModel::Serializers gem.
  adapter: DS.ActiveModelAdapter
  // revision: 11,
  // url: 'http://localhost:3000'
});

我什至玩過revision和url但一無所獲。

灰燼路由器app/assets/javascripts/router.js

NewEmberOnRails.Router.map(function() {
  return this.resource('users');
});

灰燼路線app/assets/javascripts/route.rb

NewEmberOnRails.UsersRoute = Ember.Route.extend({
  model: function() {
    // return this.get('store').find('user');
    return {users: [{
      first_name: "John",
      last_name: "Doe"
    }, {
      first_name: "Big",
      last_name: "Bang"
    }]};
  }
});

如您所見，我在這里評論了商店，並在這里返回了一個硬編碼對象，但是什么也沒有。

灰燼控制器app/assets/javascripts/controller/users.js

NewEmberOnRails.usersController = Ember.Controller.extend({
  resourceType: NewEmberOnRails.User
});

灰燼模型app/assets/javascripts/model/user.js

var attr = DS.attr;

NewEmberOnRails.User = DS.Model.extend(
  first_name = attr(),
  last_name = attr()
);

最后，視圖，Rails和Ember在一起（我想我在這里做錯了，但是我無法弄清楚是什么）：

Rails用戶查看app/views/users/index.html.erb

<h1>Users</h1>

<script type="text/x-handlebars">
  {{ view NewEmberOnRails.ListUsersView }}
</script>

因此，這就是所謂的Ember視圖（ app/assets/javascripts/views/users/list.js ）：

NewEmberOnRails.ListUsersView = Ember.View.extend({
  templateName: 'users/users',
  usersBinding: 'NewEmberOnRails.usersController'
});

那就是在這里使用users模板（ app/assets/javascripts/template/users/users.handlebars ）：

{{#each users}}
  {{view NewEmberOnRails.ShowUserView userBinding="this"}}
{{else}}
  No users!
{{/each}}

現在，在ShowUserView我有（ app/assets/javascripts/views/users/show.js ）：

NewEmberOnRails.ShowUserView = Ember.View.extend({
  templateName: 'users/show'
});

並呈現此模板（ app/assets/javascripts/templates/users/show.handlebars ）

First Name: {{user.first_name}}

因此，要整理一切 ……當我訪問localhost:3000/users我只會得到No users! ，女巫將我引向兩種可能性：

1. 我在app/assets/javascripts/template/users/users.handlebars遍歷時沒有任何users數組
2. 我有它，但是它是空的，所以路線和我的視圖/模板之間存在問題。

有人知道嗎？

Answer 1

當然，您可以按照自己的意願進行操作，但是如果它是我的，我可以讓我的路線返回一個數組並使我的控​​制器擴展ArrayController 。 似乎更簡單，並且可以與您從商店實際獲得的（ User集合）匹配。 除非您真的想返回包含數組的單個對象，否則這與“正常”的Ember Data使用情況相反-

在NewEmberOnRails.UsersRoute的代碼中，您已注釋掉store.find並將其替換為不一樣的東西...嘗試以下操作：

NewEmberOnRails.UsersRoute = Ember.Route.extend({
  model: function() {
    // return this.get('store').find('user');
    return [{
      first_name: "John",
      last_name: "Doe"
    }, {
      first_name: "Big",
      last_name: "Bang"
    }];
  }
});

和：

NewEmberOnRails.usersController = Ember.ArrayController.extend({
    resourceType: NewEmberOnRails.User
});