1

問題：

個々のフォーム要素とフォームの上部にエラー メッセージを表示できるフォームを作成しようとしています。

エラーをモデルの外のどこかに保存できるようにしたいと思います。デフォルトでは、モデル属性のみがテンプレートに含まれます。そのため、テンプレート ヘルパーを使用してエラーを追加しようとしています。これまでのところ、機能せず、次のエラーで中断します。

Uncaught ReferenceError: errors is not defined

関連するコードは次のとおりです。

景色：

var LoginFormView = Marionette.ItemView.extend({
  // some view properties
  ...

  errors: [],
  templateHelpers: function() {
    console.log('LoginFormView.templateHelpers',this, this.errors);
    var output = {};
    if(this.errors.length) {
      output.errors = this.errors;
    }
    return output;
  },

  initialize: function(currentUser, options) {
    // some initialization
    ...

    this.bindTo(this.model, "loadUser:fail", this.onLoadUserFail, this);
  },

  ...

  onLoadUserFail: function() {
    alert('Access Denied!');
    this.errors.push('Your login credentials are invalid. Please try again.');
    this.render();
  }
});

LoginFormView オブジェクトは単なるモジュール定義です。後でインスタンス化され、Backbone.Marionette.Region に注入されます。これが私が抱えている問題と関係があるかどうかはわかりませんが、念のため言及しておきます。

テンプレート:

<script type="text/template" id="login-form-template">
  <form class="form-vertical well well-shadow span4">

    ...

    <% if(errors) { %>
      <fieldset class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <legend>Oops!</legend>
        <ul>
          <% _.each(errors, function(error) { %>
            <li><%= error %></li>
          <% }); %>
        </ul>
      </fieldset>
    <% } %>

    ...

  </form>
</script>

テンプレートの次の場所でエラーがスローされるため、エラーがテンプレートに反映されていないようです。

<% if(errors) { %>

Backbone.Marionette のソースを見ると、templateHelpers メソッドが実行され、その出力が「データ」オブジェクト (シリアル化されたモデル) とマージされるという印象を受けました。

その場合、モデルのプロパティにアクセスできるのに、'errors' プロパティが定義されていないのはなぜですか?

ソリューション：

joversonは親切にも問題を指摘してくれました。新しい templateHelpers メソッドは次のようになります。

errors: [],
templateHelpers: function() {
  console.log('LoginFormView.templateHelpers', this, this.errors);
  var output = {};
  output.errors = this.errors;
  return output;
},
4

1 に答える 1

2

このビューが でマリオネット領域を介して表示されると、ほとんどすぐにビューのメソッドshow()が呼び出されます。ビューの配列にアイテムが含まれるまで、テンプレートデータのプロパティは設定されないため、テンプレートでは未定義になります。render()errorserrorserrors

エラーのチェックを削除し、少なくとも定義されているように空の配列を渡すだけの場合、同じ効果のためにテンプレートで存在チェックを実行できるはずです。

于 2012-07-24T21:49:33.423 に答える