Underscore.jsテンプレートで未定義の属性を処理します

StackOverflow https://stackoverflow.com/questions/9348906

  •  27-10-2019
  •  | 
  •  

質問

私はビューで単一のバックボーンモデルをレンダリングしています。デフォルトのアンダースコアテンプレートを使用してモデルをレンダリングしています。ビューをレンダリングしているときに（モデルにはロードされていないが）、「未定義の」属性エラーを処理するにはどうすればよいですか？明確にするために、ここに例があります。

// Using Mustache style markers
_.templateSettings = {
    interpolate : /\{\{(.+?)\}\}/g
};

App.Model = Backbone.Model.extend({});

App.Collection = Backbone.Collection.extend({
    model: App.Model
});

App.View = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'render');
        this.template = _.template($('#model_template').html());
        this.model.bind('reset', this.render);
    },
    render: function() {
        var renderedContent = this.template(this.model.toJSON());
        $(this.el).html(renderedContent);
        return this;
    }
});

// HTML
<div id="container"></div>
<script id="model_template" type="text/template">
    <strong>Name:</strong> {{ name }} <br/>
    <strong>Email:</strong> {{ email }} <br/>
    <strong>Phone:</strong> {{ phone }}
</script>

// Run code
var collection = new App.Collection;
var view = new App.View(model: collection.at(0));
$('#container').html(view.render().el);
collection.fetch();

このコードが実行されると、ビューは2回レンダリングされ、最初に空のモデルで、2番目にAjaxクエリが完了したときに2番目にレンダリングされます（および「リセット」がトリガーされます）。しかし、私が直面している問題は、モデルが空になった最初のインスタンスでJSが停止することです。モデル属性が未定義であるというエラーが発生します。

ここで何が間違っているのですか？最初のインスタンスでビューがレンダリングされたときに、「未定義の」エラーを抑制できますか？

役に立ちましたか？

解決

あなたがしていることにいくつかの問題があります：

あなたがするとき：

// Run code
var collection = new App.Collection;
var view = new App.View({model: collection.at(0)});
$('#container').html(view.render().el);
collection.fetch();

まず、コレクションを作成します。それに関連するモデルはまだありません。そのため、次に、まだ存在しないコレクションの最初のモデルでビューを初期化します。それを行う正しい方法は、コレクションをfetch（）feth（）と、それが完了したときにビューを作成することです。何かのようなもの：

var p = collection.fetch();
p.done(function () {
  var view = new App.View({model: collection.at(0)});
  ...
}

また、コンテナ要素をビューに提供することをお勧めします。あなたは単にそれをすることができます

var view = new App.View({model: collection.at(0), el: '#container'});

他のヒント

1つのオプションは、モデルのデフォルトの空の値を定義することです。

App.Model = Backbone.Model.extend({
  defaults: {
    name: '',
    email: '',
    phone: ''
  }
});

アンダースコアテンプレートのレンダリング中に未定義の変数エラーを回避するには、テンプレートデータをラッパーオブジェクト内に渡します。プロパティアクセスが欠落していると、エラーが発生しません。

var template = _.template($('#template').html());
var data = {name:'Jeo'}; // phone not available
template({data:data});
// Output: Jeo 

<div id="template">
    {{data.name}} {{data.phone}}
</div>

また、使用することをお勧めします 遠位テンプレート.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top