詳しい人求む！

backbone.js テンプレートの表示方法教えて !

解決済

質問者：i-d-a-i
質問日時：2021/09/25 19:43
回答数：1件

backbone.js テンプレートの表示方法教えて !
分かる方よろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://code.jquery.com/jquery-2.2.2.js" integrity="sha256-4/
zUCqiq0kqxhZIyp4G0Gk+AOtCJsY1TA00k5ClsZYE=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/
underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/
backbone.js/1.3.2/backbone.js"></script>

</head>

<body>
<script type="text/template" id="user-template">
エリア <%- area %> <%- name %> <%- age %> 才
</script>

<script>
const Person = Backbone.Model.extend({
defaults: { area: "東京都" }
});

const Users = Backbone.Collection.extend({ model: Person });
const users = new Users();

//データ追加
users.add({ name: "次郎", age: 28 });
users.add({ name: "花子", age: 25 });

// 要素の作成
const span_view = Backbone.View.extend({
tagName: "span",
template: _.template($("#user-template").html()),

render: function() {
// コレクションのデータをテンプレートに反映
const tpl = this.template(this.model.toJSON());
this.$el.html(tpl);

return this;
}
});

const span = new span_view({ collection: users });

// 要素を画面に描画
$("body").html(span.render().el);
</script>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2021/09/26 12:02

こんにちは

backboneはまったく存じませんけれど、連呼なさっているようなので・・・

値を調べてみると、render に渡されている this値は collection のラッパーのようなので、複数を処理する記述にしておかないとうまくいかないのではないでしょうか。
また、template に渡すのはJSONではなく、オブジェクトそのもののように思われます。

ということで、
//const tpl = this.template(this.model.toJSON());
const tpl = this.collection.map( v => this.template(v.attributes) ).join('<br />');
に変えてみると、一応、表示はできます。
（span 要素内なので、改行を追加してあります。）

多分、なさりたい結果とは違うような気がしますし、backbone の正しい使い方（=記述方法）なのかどうかも怪しいですけれど、「表示方法教えて！」というご質問なので、とりあえずのご参考までに。