1

ジャスミンを使用して、バックボーン ビューへの正しいテンプレートの割り当てをテストしようとしています。

これは私のテストです：

describe("Backbone views", function() {

// Runs before every View spec
beforeEach(function() {

    // Instantiates a new View instance
    this.view = new Index();

});
it("should contain the appropriate template", function() {

    expect(this.view.template).toEqual(IndexViewTemplate);

});

}

view.template 変数は render 関数に入力されます。

  initialize: () ->
    super()

    @render()

  # Renders the view's template to the UI
  render: () ->

      # Setting the view's template property using the Underscore template method
    @template = _.template template, 
      {}

      # Dynamically updates the UI with the view's template
    @$el.html @template

      # Maintains chainability
    return @

変数 IndexViewTemplate には、<% if (...) %> などのロジックを含む生のテンプレート コードが含まれています。

このコードを実行すると、この 2 つの要素が等しくないという例外が発生します。これは、this.view.template でロジック部分が ... レンダリングされて... ;):

should contain the appropriate template

Expected 

'<!-- HTML Template --> <div class="page"> <header class="navbar navbar-inner navbar-fixed-top"> <div class="nav pull-left"> <a href="#" class="btn" type="submit">Back</a> </div> <div> <a class="brand">Backbone-Require-Boilerplate (BRB)</a > </div> <div class="nav pull-right"> <a href="#next" class="btn" type="submit">Next</a> </div> </header> <!-- /header --> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div class="content"> </div> </div> </div> </div> <footer class="footer navbar navbar-fixed-bottom"> <div class="navbar-inner"> <p>Written by <a href="https://github.com/hijolan" target="_blank">Constantin Lebrecht</a></p> </div> </footer><!-- /footer --> </div> <!-- /page --> ' 

to equal 

'<!-- HTML Template --> <div class="page"> <header class="navbar navbar-inner navbar-fixed-top"> <div class="nav pull-left"> <% if (titleBar.backButton.title.length > 0) {%> <a href="<%= titleBar.backButton.href %>" class="btn" type="submit"><%= titleBar.backButton.title %></a> <% } %> </div> <div> <a class="brand"><%= titleBar.title %></a > </div> <div class="nav pull-right"> <% if (titleBar.actionButton.title.length > 0) {%> <a href="<%= titleBar.actionButton.href %>" class="btn" type="submit"><%= titleBar.actionButton.title %></a> <% } %> </div> </header> <!-- /header --> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div class="content"> <%= content.text %> </div> </div> </div> </div> <footer class="footer navbar navbar-fixed-bottom"> <div class="navbar-inner"> <p>Written by <a href="https://github.com/hijolan" target="_blank">Constantin Lebrecht</a></p> </div> </footer><!-- /footer --> </div> <!-- /page --> '.

割り当てをテストするための最良のアプローチは何ですか?

よろしく、ヒジョラン

4

1 に答える 1

1

テンプレートをレンダリングする方法は、少し慣用的ではありません。@template通常、次のプロパティで行うように、「レンダリングされた」テンプレート文字列を保持する必要はありません。

@template = _.template template, 
  viewConfig
@$el.html @template

ビュー インスタンスの有効期間中にテンプレートが変更されないと仮定して、個人的には、レンダリングされていないテンプレートをコンストラクターの@templateプロパティに割り当てます。initialize

initialize: () ->
  super()
  @template = template 
  @render()

# Renders the view's template to the UI
render: () ->
  viewConfig = _.merge {}, @config.template, {}
  @$el.html _.template(@template, viewConfig) 
  return @

その後、テストは、テストexpect(this.view.template).toEqual(IndexViewTemplate)したいこと、つまり正しいテンプレートが割り当てられていることをテストします。

ところで。このコード行が何をするのかよくわかりません:

viewConfig = _.merge {}, @config.template, {}
于 2013-01-06T15:30:00.660 に答える