1

こんにちは、私の zend アプリケーションにバックボーン app/assets フォルダーを作成したい場合、どこに配置すればよいでしょうか? バックボーン アプリ フォルダーの構成Javascript,Stylesheets and Templates

簡単に言えば、これはバックボーンがレールでどのように機能するかです

routes.rb

  resources :entries

エントリ/インデックス用の Rails コントローラ

class EntriesController < ApplicationController
    respond_to :json

    def index
        respond_with Entry.all
    end
end

これらのコードで URL が /entries にある場合、バックボーン コレクションは単純に理解されます

class Blog.Collections.Entries extends Backbone.Collection
    url: '/entries'

バックボーン ルータで

class Blog.Routers.Entries extends Backbone.Router
  routes:
    '': 'index'
    'entries/:id': 'show'

  initialize: ->
    @collection = new Blog.Collections.Entries()
    @collection.fetch()

  index: ->
    view = new Blog.Views.EntriesIndex(collection: @collection)
    #alert 'hi'
    $('#container').html(view.render().el)
  show: (id) ->
    alert "Entry #{id}"

次にレンダリングしますBackbone.View 

class Blog.Views.EntriesIndex extends Backbone.View

    template: JST['entries/index']

    initialize: ->
        @collection.on('reset',@render,this)
    render: ->

        $(@el).html(@template(entries: @collection))
        this

assets/templates/entries/index.jst.eco をレンダリングするためのテンプレート

<h1>Blog</h1>

<ul>
<% for entry in @entries.models: %>
    <li><%= entry.get('name')%></li>
<% end %>
</ul>

最後に、assets/javascripts/blog.js.coffee でアプリを初期化します

window.Blog =
  Models: {}
  Collections: {}
  Routers: {}
  Views: {}
  initialize: -> 
    new Blog.Routers.Entries()
    Backbone.history.start()

$(document).ready ->
    Blog.initialize()

上記の Backbone.js の MVC パターンは興味深いですが、Zend Framework で実装したいので、Rails で使用するように使用するには、どの構成を変更する必要がありますか?また、ビューをレンダリングするためのテンプレートをどのように処理しますか? ありがとう

4

1 に答える 1

0

バックボーン アプリを public フォルダー (すべての CSS および Javascript ファイルがある場所) に配置します。

お好みのテンプレート エンジンを使用できるテンプレートについては、Underscore を使用して、別のライブラリを含める必要がないようにします。この例は次のようになります。

window.product_v = Backbone.View.extend({
    template: _.template("<article><img src='<%=icon%>'/> <% } %><article>"),

    render: function () {
        var self = this;
        this.model.fetch({
            processData: true,
            success: function (m) {
                var prod = $("<div/>", {
                        'html': self.template(m.toJSON())
                }).appendTo('.content');

            }
        });
    }
});

window.product_m = Backbone.Model.extend({
    urlRoot: '/api/get_product'
});

モデルでは、「urlRoot」でデータ ソースを定義します。これは、おそらく Zend コントローラーの 1 つへのパスを参照する場所です。

于 2012-11-13T17:50:03.773 に答える