hezymal/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="Backbone Application">
  <title>JS Bin</title>
</head>
<body>
  <div id="root"></div>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script id="jsbin-javascript">
var DropdownItem = Backbone.Model.extend({
  defaults: {
    id: -1,
    name: "",
  },
});

var DropdownItemView = Backbone.View.extend({
  tagName: "li",

  events: {
    "click": "onSelect",
  },

  render: function() {
    this.$el.html(this.model.get("name"));

    return this;
  },

  onSelect: function(event) {
    event.preventDefault();

    this.trigger("select", this.model);
  },
});

var DropdownCollection = Backbone.Collection.extend({
  model: DropdownItem,
});

var DropdownView = Backbone.View.extend({
  template: _.template(
    "<section>" +
      "<header><%= title %></header>" +
      "<ol></ol>" +
    "</section>"
  ),

  initialize: function() {
    this.onSelectItem = this.onSelectItem.bind(this);
  },

  render: function() {
    var that = this;

    var title = this.selectedItem ? this.selectedItem.get("name") : "Выберите элемент";

    var views = this.collection.reduce(function(memo, model) {
      var view = new DropdownItemView({ model: model });
      view.on("select", that.onSelectItem);
      memo.push(view.render().el);
      return memo;
    }, []);

    this.$el
      .html(this.template({ title: title }))
      .find("ol")
      .append(views);

    return this;
  },

  onSelectItem: function(item) {
    this.selectedItem = item;
    this.render();
  },
});

var FilterView = Backbone.View.extend({
  render: function() {
    var collection = new DropdownCollection([
      new DropdownItem({
        id: 1,
        name: "Lada",
      }),
      new DropdownItem({
        id: 2,
        name: "UAZ",
      }),
      new DropdownItem({
        id: 3,
        name: "GAZ",
      }),
    ]);

    var view = new DropdownView({
      collection: collection,
      title: "Выберите марку",
    });

    this.$el.append(view.render().el);

    return this;
  },
});

var AppView = Backbone.View.extend({
  el: "#root",

  render: function() {
    this.$el.append(new FilterView().render().el);
    return this;
  },
});

$(function() {
  new AppView().render();
});
</script>


<script id="jsbin-source-javascript" type="text/javascript">var DropdownItem = Backbone.Model.extend({
  defaults: {
    id: -1,
    name: "",
  },
});

var DropdownItemView = Backbone.View.extend({
  tagName: "li",

  events: {
    "click": "onSelect",
  },

  render: function() {
    this.$el.html(this.model.get("name"));

    return this;
  },

  onSelect: function(event) {
    event.preventDefault();

    this.trigger("select", this.model);
  },
});

var DropdownCollection = Backbone.Collection.extend({
  model: DropdownItem,
});

var DropdownView = Backbone.View.extend({
  template: _.template(
    "<section>" +
      "<header><%= title %></header>" +
      "<ol></ol>" +
    "</section>"
  ),

  initialize: function() {
    this.onSelectItem = this.onSelectItem.bind(this);
  },

  render: function() {
    var that = this;

    var title = this.selectedItem ? this.selectedItem.get("name") : "Выберите элемент";

    var views = this.collection.reduce(function(memo, model) {
      var view = new DropdownItemView({ model: model });
      view.on("select", that.onSelectItem);
      memo.push(view.render().el);
      return memo;
    }, []);

    this.$el
      .html(this.template({ title: title }))
      .find("ol")
      .append(views);

    return this;
  },

  onSelectItem: function(item) {
    this.selectedItem = item;
    this.render();
  },
});

var FilterView = Backbone.View.extend({
  render: function() {
    var collection = new DropdownCollection([
      new DropdownItem({
        id: 1,
        name: "Lada",
      }),
      new DropdownItem({
        id: 2,
        name: "UAZ",
      }),
      new DropdownItem({
        id: 3,
        name: "GAZ",
      }),
    ]);

    var view = new DropdownView({
      collection: collection,
      title: "Выберите марку",
    });

    this.$el.append(view.render().el);

    return this;
  },
});

var AppView = Backbone.View.extend({
  el: "#root",

  render: function() {
    this.$el.append(new FilterView().render().el);
    return this;
  },
});

$(function() {
  new AppView().render();
});</script></body>
</html>

## jsbin.lisiril.js
var DropdownItem = Backbone.Model.extend({
  defaults: {
    id: -1,
    name: "",
  },
});

var DropdownItemView = Backbone.View.extend({
  tagName: "li",

  events: {
    "click": "onSelect",
  },

  render: function() {
    this.$el.html(this.model.get("name"));

    return this;
  },

  onSelect: function(event) {
    event.preventDefault();

    this.trigger("select", this.model);
  },
});

var DropdownCollection = Backbone.Collection.extend({
  model: DropdownItem,
});

var DropdownView = Backbone.View.extend({
  template: _.template(
    "<section>" +
      "<header><%= title %></header>" +
      "<ol></ol>" +
    "</section>"
  ),

  initialize: function() {
    this.onSelectItem = this.onSelectItem.bind(this);
  },

  render: function() {
    var that = this;

    var title = this.selectedItem ? this.selectedItem.get("name") : "Выберите элемент";

    var views = this.collection.reduce(function(memo, model) {
      var view = new DropdownItemView({ model: model });
      view.on("select", that.onSelectItem);
      memo.push(view.render().el);
      return memo;
    }, []);

    this.$el
      .html(this.template({ title: title }))
      .find("ol")
      .append(views);

    return this;
  },

  onSelectItem: function(item) {
    this.selectedItem = item;
    this.render();
  },
});

var FilterView = Backbone.View.extend({
  render: function() {
    var collection = new DropdownCollection([
      new DropdownItem({
        id: 1,
        name: "Lada",
      }),
      new DropdownItem({
        id: 2,
        name: "UAZ",
      }),
      new DropdownItem({
        id: 3,
        name: "GAZ",
      }),
    ]);

    var view = new DropdownView({
      collection: collection,
      title: "Выберите марку",
    });

    this.$el.append(view.render().el);

    return this;
  },
});

var AppView = Backbone.View.extend({
  el: "#root",

  render: function() {
    this.$el.append(new FilterView().render().el);
    return this;
  },
});

$(function() {
  new AppView().render();
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta name="description" content="Backbone Application">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="root"></div>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
	<script id="jsbin-javascript">
	var DropdownItem = Backbone.Model.extend({
	defaults: {
	id: -1,
	name: "",
	},
	});

	var DropdownItemView = Backbone.View.extend({
	tagName: "li",

	events: {
	"click": "onSelect",
	},

	render: function() {
	this.$el.html(this.model.get("name"));

	return this;
	},

	onSelect: function(event) {
	event.preventDefault();

	this.trigger("select", this.model);
	},
	});

	var DropdownCollection = Backbone.Collection.extend({
	model: DropdownItem,
	});

	var DropdownView = Backbone.View.extend({
	template: _.template(
	"<section>" +
	"<header><%= title %></header>" +
	"<ol></ol>" +
	"</section>"
	),

	initialize: function() {
	this.onSelectItem = this.onSelectItem.bind(this);
	},

	render: function() {
	var that = this;

	var title = this.selectedItem ? this.selectedItem.get("name") : "Выберите элемент";

	var views = this.collection.reduce(function(memo, model) {
	var view = new DropdownItemView({ model: model });
	view.on("select", that.onSelectItem);
	memo.push(view.render().el);
	return memo;
	}, []);

	this.$el
	.html(this.template({ title: title }))
	.find("ol")
	.append(views);

	return this;
	},

	onSelectItem: function(item) {
	this.selectedItem = item;
	this.render();
	},
	});

	var FilterView = Backbone.View.extend({
	render: function() {
	var collection = new DropdownCollection([
	new DropdownItem({
	id: 1,
	name: "Lada",
	}),
	new DropdownItem({
	id: 2,
	name: "UAZ",
	}),
	new DropdownItem({
	id: 3,
	name: "GAZ",
	}),
	]);

	var view = new DropdownView({
	collection: collection,
	title: "Выберите марку",
	});

	this.$el.append(view.render().el);

	return this;
	},
	});

	var AppView = Backbone.View.extend({
	el: "#root",

	render: function() {
	this.$el.append(new FilterView().render().el);
	return this;
	},
	});

	$(function() {
	new AppView().render();
	});
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">var DropdownItem = Backbone.Model.extend({
	defaults: {
	id: -1,
	name: "",
	},
	});

	var DropdownItemView = Backbone.View.extend({
	tagName: "li",

	events: {
	"click": "onSelect",
	},

	render: function() {
	this.$el.html(this.model.get("name"));

	return this;
	},

	onSelect: function(event) {
	event.preventDefault();

	this.trigger("select", this.model);
	},
	});

	var DropdownCollection = Backbone.Collection.extend({
	model: DropdownItem,
	});

	var DropdownView = Backbone.View.extend({
	template: _.template(
	"<section>" +
	"<header><%= title %></header>" +
	"<ol></ol>" +
	"</section>"
	),

	initialize: function() {
	this.onSelectItem = this.onSelectItem.bind(this);
	},

	render: function() {
	var that = this;

	var title = this.selectedItem ? this.selectedItem.get("name") : "Выберите элемент";

	var views = this.collection.reduce(function(memo, model) {
	var view = new DropdownItemView({ model: model });
	view.on("select", that.onSelectItem);
	memo.push(view.render().el);
	return memo;
	}, []);

	this.$el
	.html(this.template({ title: title }))
	.find("ol")
	.append(views);

	return this;
	},

	onSelectItem: function(item) {
	this.selectedItem = item;
	this.render();
	},
	});

	var FilterView = Backbone.View.extend({
	render: function() {
	var collection = new DropdownCollection([
	new DropdownItem({
	id: 1,
	name: "Lada",
	}),
	new DropdownItem({
	id: 2,
	name: "UAZ",
	}),
	new DropdownItem({
	id: 3,
	name: "GAZ",
	}),
	]);

	var view = new DropdownView({
	collection: collection,
	title: "Выберите марку",
	});

	this.$el.append(view.render().el);

	return this;
	},
	});

	var AppView = Backbone.View.extend({
	el: "#root",

	render: function() {
	this.$el.append(new FilterView().render().el);
	return this;
	},
	});

	$(function() {
	new AppView().render();
	});</script></body>
	</html>