追加の変数をアンダースコアテンプレートに渡す方法

Question

検索結果をアンダースコア テンプレートで表示するバックボーン ビューがあります。結果内の検索語を強調表示したいので、テンプレートに次の print メソッドを含めます。

print(someKey.replace(searchTerm, '<b>' + searchTerm + '</b>')

アスペクトどおりに機能しますが、設定する必要があります searchTerm この機能を実現するには、グローバル名前空間内の変数を使用します。print メソッドでビュー モデルにアクセスする方法があるかどうか疑問に思います。そうすれば、次のように書くことができます。

print(someKey.replace(searchTerm, '<b>' + this.model.get('searchTerm') + '</b>')

または、レンダリング関数でローカル変数として searchTerm を設定し、テンプレートでそれにアクセスできれば。

バックボーンビュー全体は次のとおりです。

var searchTerm;
var SearchResultView = Backbone.View.extend({
    initialize: function() {
        this.model.bind('change:rows', this.render, this);
        this.model.bind('change:searchTerm', this.clear, this)
    },
    template: _.template("<tr><td><% print(someKey.replace(searchTerm, '<b>' + searchTerm + '</b>')); %></td></tr>", this),
    render: function() {
       searchTerm = this.model.get('searchTerm')
        _.each(this.model.get('rows'), function(row) {
            this.el.append($(this.template(row.doc)));
        }, this)
    },
    clear: function(){
        this.el.empty();
    }
});

Answer 1

あなたの質問を完全に理解できたかどうかわかりません。ただし、複数のオブジェクトをテンプレート関数に渡すために、次のようなことを行います。

 $(this.el).html(_.template(html)($.extend({}, this.model.toJSON(), App.lists.toJSON())))

jquery extend 関数を使用すると、2 つのオブジェクトを 1 つにマージできます。したがって、あなたの場合、テンプレート中に「searchTerm」をモデルにマージできます。

_.template(html)($.extend({}, row.doc, {"searchTerm": searchTerm}))

他のオプションは、モデル全体をテンプレート関数に渡し、テンプレート内でアンダースコアの反復を実行することです。それについてさらに説明が必要な場合はお知らせください。

編集：

ここにリンクがあります jQuery拡張

アンダースコアには と もあります 拡張メソッド jQueryを使用していない場合

編集編集:

これは私の 2 番目の提案の一例を示すだけです。おそらく、あなたのものに投入するにはいくつかの調整が必要でしょうが、これがアイデアです。

template: _.template("

    <% _(rows).each(function(row) { %>
        <tr><td><% print(someKey.replace(searchTerm, '<b>' + searchTerm + '</b>')); %></td></tr>
<% } %>

"),
render: function(){
    this.el.append(this.template(this.model.toJSON()));
}