web-dev-qa-db-ja.com

バックボーンでのハンドルバーの使用

Backbone/Handlebars/Requireを学習しています。 SO-下線の代わりにハンドルバーを使用するのに役立つ情報を提供するチュートリアルやウェブサイトを教えていただけますか？

backbone.jsrequirejshandlebars.js
49
Joseph at SwiftOtter

underscoreテンプレートの代わりにhandlebars.jsを使用するのは簡単です。この例を確認してください。

https://cdnjs.com/libraries/backbone.js/tutorials/what-is-a-view （「テンプレートの読み込み」セクションにスクロールします）

SearchView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        // Compile the template using underscore
        var template = _.template( $("#search_template").html(), {} );
        // Load the compiled HTML into the Backbone "el"
        this.el.html( template );
    }
});

基本的に、バックボーンの規則は、レンダリング関数でhtmlを構築することです。テンプレートエンジンの使用は完全にあなた次第です（私はBackboneが好きです）。したがって、次のように変更します。

SearchView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
        // Compile the template using Handlebars
        var template = Handlebars.compile( $("#search_template").html() );
        // Load the compiled HTML into the Backbone "el"
        this.el.html( template );
    }
});

require.jsを使用しているため、モジュールの最上部でHandlebarsを依存関係にすることができます。私はこれにかなり慣れていますが、焦点を合わせるのはBackbone.jsパターンとrequire.jsの使用法だと思われます。

79
SimplGy

テンプレートを1回（初期化中に）コンパイルすることをお勧めします。これにより、レンダリングのたびにテンプレートを再コンパイルすることを避けられます。また、HTMLを生成するには、コンパイルされたテンプレートにモデルを渡す必要があります。

SearchView = Backbone.View.extend({
  initialize: function(){
    // Compile the template just once
    this.template = Handlebars.compile($("#search_template").html());
    this.render();
  },
  render: function(){
    // Render the HTML from the template
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});
2
satanas

Require.jsを使用している場合、現在のHandlebarsファイルを使用することはできません。次の Handlebars Plugin を使用しましたが、現在のバージョンで最新の状態に保たれているようです。 Handlebarsがモジュールでnullを返している場合は、Handlebarsファイルを上記のプラグインに置き換えてください。

1
TYRONEMICHAEL
define(["app", "handlebars",
    "text!apps/templates/menu.tpl"
], function (app, Handlebars, template) {

    return {
        index: Marionette.ItemView.extend({
            template: Handlebars.compile(template),
            events: {
                'click .admin-menu-ref': 'goToMenuItem'
            },
            goToMenuItem: function (e) {
               //......
            }
        })
    }
});


 new view.index({model: models});
0
zloctb