Backbone.jsで、複数のModel間で変数を共有化したい場合

Collection の使い道がいまいち思いつかなかったのですが、ようやく使えそう。

まず、ModelBaseという共通クラスを定義して
それを継承するModelを複数個定義。

test.model.coffee

class ModelBase extends Backbone.Model
	defaults: {
		var1: "",
		var2: "",
	}

	urlRoot: ->
		"/js_test"

class TestModelA extends ModelBase
	defaults: ->
		_.defaults {}, _.result ModelBase.prototype, "defaults"

	url: ->
		@urlRoot()

class TestModelB extends ModelBase
	defaults: ->
		_.defaults {}, _.result ModelBase.prototype, "defaults"

	url: ->
		@urlRoot()

Collectionを定義。

test.collection.coffee

class TestCollection extends Backbone.Collection

Viewを定義。

test.view.coffee

class TestView extends Backbone.View
	el: ".container"

	events: {
		"click #setParams": "setParams",
	}

	render: ->
		$("#result").empty()
		for model in @collection.models
			$("#template").tmpl(model.attributes).appendTo("#result")

	setParams: ->
		for model in @collection.models
			model.set {
				"var1":$("#var1").val(),
				"var2":$("#var2").val(),
			}
		@render()

目的は、this.setParams()でTestModelAとTestModelB間で変数を共有すること。
this.render()はおまけです。

Model, View, Collection のインスタンスを生成。

test.default.coffee

mTestA = new TestModelA
mTestB = new TestModelB

cTest = new TestCollection
cTest.add mTestA
cTest.add mTestB

vTest = new TestView collection:cTest

もしレンダリングしたければ、html側で

HTML

<input type="text" id="var1">
<input type="text" id="var2">
<button id="setParams">render</button>

みたいな感じです。

正直、こんな面倒なことをしなくても
_.defaults()や_.extend()をつかえばいいのかな…