6

RailsアプリでAngularJSを使い始めたばかりですが、Rails内でhamlテンプレートを使用することに慣れているので、クライアント側のAngularJSでも同じことをしたいと思います。問題は、hamlファイルのどこを読むべきかわからないことです。

私は投資家向けのモデルを持っており、「show」テンプレートを最初は最も簡単なhamlに変換しようとしています。

これがshowに関連する私のAngularJSコードです

投資家.js.coffee

  # Setup the module & route
  angular.module("investor", ['investorService'])
    .config(['$routeProvider', ($provider) ->
      $provider
        .when('/investors/:investor_id', {templateUrl: '/investors/show.html', controller: 'InvestorCtrl'})
    ])
    .config(["$httpProvider", (provider) ->
      provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
    ])

  angular.module('investorService', ['ngResource'])
    .factory('Investor', ($resource) ->
      return $resource('/investors/:investor_id.json', {}, {
        show: {method: 'GET'},
      })
    )

  angular.bootstrap document, ['investor']

これが私のコントローラーAngularJSコードです

投資家_コントローラー.js.coffee

# Show Investor
window.InvestorCtrl = ($scope, $routeParams, Investor) ->
  html = haml.compileHaml({sourceId: 'simple'})
  $('#haml').html(html())

  investor_id = $routeParams.investor_id
  $scope.investor = Investor.show({investor_id: investor_id})

バックエンドには、RailsJSONAPIがあります。

これが読み込まれるshow.htmlファイルです

<script type="text/haml-template" id="simple">
  %h1 {{investor.name}}
</script>

<div id="haml"></div>

<h1>{{investor.name}}</h1>

<p>
  <b>Total Cost</b>
  {{investor.total_cost}}
</p>

<p>
  <b>Total Value</b>
  {{investor.total_value}}
</p>

<a href='/investors/angular#/investors/{{investor.id}}/edit'>Edit</a>
<a href='/investors'>Back</a>

最終的には、.hamlを作成してtemplateURLに渡し、haml_coffee_assetsプラグインを取得してコンパイルしてから、AngularJSが動的フィールドの確認とコンテンツの変更を開始します。

参照：https ：//github.com/netzpirat/haml_coffee_assets

現在、これはhamlを変換し、hamlのIDを持つdivに配置します。ただし、AngularJSは、操作が遅すぎるため、hamlコード内の{{investor.name}}を投資家の名前に変更しません。

このようなAngularJSプロジェクト内にクライアント側のhamlテンプレートを適切に実装するにはどうすればよいですか？

4

2 に答える 2

8

すべてのHamlテンプレートをassets/templatesフォルダー内に配置できます。次に、アセットパイプラインを接続して、これを使用してHamlにサービスを提供します。

Rails.application.assets.register_engine '.haml', Tilt::HamlTemplate

その後、すべてのテンプレートが/assets/(templatename).htmlから利用できるようになります。

Hamlテンプレート内にRailsヘルパーを含めることができるようにしたい場合は、カスタムモジュールを定義して、代わりにそれを使用できます。

module CustomHamlEngine
  class HamlTemplate < Tilt::HamlTemplate
    def evaluate(scope, locals, &block)
      scope.class_eval do
        include Rails.application.routes.url_helpers
        include Rails.application.routes.mounted_helpers
        include ActionView::Helpers
      end

     super
    end
  end
end

Rails.application.assets.register_engine '.haml', CustomHamlEngine::HamlTemplate

これにより、すべてのレールヘルパーがテンプレートのスコープに追加されます。次に、テンプレートのURLをAngularに渡すと、すべてのレッグワークが自動的に実行されます。

于 2013-03-05T19:12:33.223 に答える