带有客户端haml的angularjs

2022-01-24 00:00:00 ruby-on-rails angularjs javascript coffeescript haml

我刚刚开始在我的 Rails 应用程序中使用 AngularJS，由于我习惯在 Rails 中使用 haml 模板，我想在客户端对 AngularJS 做同样的事情.问题是我不知道在 haml 文件中读取的位置.

I've just started using AngularJS with my Rails app and as I'm used to using haml templates within Rails I would like to do the same with AngularJS on the client side. Problem is I don't know where to read in the haml file.

我有一个投资者模型，我正在尝试将展示"模板转换为 haml，因为它是最容易开始的.

I have a model for investors and I'm trying to convert the 'show' template over to haml as it's the easiest to start with.

这是我与 show 相关的 AngularJS 代码

Here is my AngularJS code relating to show

investors.js.coffee

investors.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 代码

Here is my controller AngularJS code

investors_controller.js.coffee

investors_controller.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})

在后端我有一个 Rails JSON API.

In the backend I have a Rails JSON API.

这是它读取的 show.html 文件

Here is the show.html file it reads in

<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 开始查看动态字段并更改内容之前对其进行编译.

Ultimately I would like to have a .haml and pass this to the templateURL and get the haml_coffee_assets plugin to compile it before AngularJS starts looking at the dynamic fields and changing the content.

参考:https://github.com/netzpirat/haml_coffee_assets

目前这将转换haml并将其放入具有haml id的div中.但是 AngularJS 不会将 haml 代码中的 {{investor.name}} 更改为投资者的名字，因为它在操作中为时已晚.

Currently this will convert the haml and put it into the div with id of haml. However AngularJS will not change the {{investor.name}} within the haml code to the investor's name as it's too late in the operation.

如何在这样的 AngularJS 项目中正确实现客户端 haml 模板?

How do I properly implement client side haml templates within an AngularJS project like this?

推荐答案

您可以将所有 Haml 模板放在 assets/templates 文件夹中.然后你使用这个连接你的资产管道来为 Haml 服务:

You can put all of your Haml templates inside an assets/templates folder. Then you hook up your asset pipeline to serve Haml using this:

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

那么你的所有模板都可以从/assets/(template name).html 获得

Then all of your templates will be available from /assets/(template name).html

如果您希望能够在 Haml 模板中包含 rails 助手，您可以定义一个自定义模块并使用它来代替:

If you want to be able to include rails helpers within your Haml templates you can define a custom module and use that instead:

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

这会将所有 rails 助手添加到模板的范围中.然后你可以将模板 url 传递给 angular，它会自动为你完成所有的工作！

This will add all the rails helpers into the scope for your templates. Then you can pass in template urls to angular and it will automagically do all the leg work for you!

相关文章