foxdonut/bower.json

## bower.json
{
  "name": "rave-wire-example",
  "version": "0.0.0",
  "description": "wire example",
  "main": "app/run.js",
  "authors": [
    "foxdonut <fdaoud@proinbox.com>"
  ],
  "moduleType": [
    "amd"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "wire": "~0.10.9",
    "jquery": "~2.1.1",
    "rivets": "~0.7.1",
    "rave": "~0.4.5",
    "rave-wire": "~0.2.0"
  }
}

## index.html
<!DOCTYPE HTML>
<html data-rave-meta="bower.json" data-debug>
	<head>
		<title>Two selects</title>
	</head>

	<body>
    <div id="meal-select">
      <div>Meal:</div>
      <select class="meal">
        <option value=""></option>
        <option value="breakfast">Breakfast</option>
        <option value="lunch">Lunch</option>
        <option value="dinner">Dinner</option>
      </select>
    </div>

    <div id="menu-select">
      <div>Menu choice:</div>
      <select class="menu">
        <option value=""></option>
        <option data-rv-each-option="menuOptions" value="{{option.value}}">
          {{option.label}}
        </option>
      </select>
    </div>
	</body>

	<script src="bower_components/rave/rave.js"></script>

</html>

## main.js
define(["./config/rivets-config"], function() {
  return {
    $plugins: [ "wire/dom", "wire/on" ],

    model: { module: "app/model" },
    getMenuOptions: { module: "app/get-menu-options" },
    mealSelect: { $ref: "dom!meal-select" },
    menuSelect: { $ref: "dom!menu-select" },
    getSelectedValue: { module: "app/get-selected-value" },

    onChange: {
      compose: "getSelectedValue | getMenuOptions | model.update"
    },

    controller: {
      literal: { name: "controller" },
      on: {
        mealSelect: { "change:select": "onChange" }
      }
    },

    rivets: {
      module: "rivets",
      ready: {
        bind: [
          { $ref: "menuSelect" },
          { $ref: "model" }
        ]
      }
    }
  };
});

## run.js
define(["wire", "./main"], function(wire, main) {
  wire(main);
});

## structure.txt
.
|-- app
|   |-- config
|   |   `-- rivets-config.js
|   |-- get-menu-options.js
|   |-- get-selected-value.js
|   |-- main.js
|   |-- model.js
|   `-- run.js
|-- bower.json
|-- index.html
`-- package.json
	{
	"name": "rave-wire-example",
	"version": "0.0.0",
	"description": "wire example",
	"main": "app/run.js",
	"authors": [
	"foxdonut <fdaoud@proinbox.com>"
	],
	"moduleType": [
	"amd"
	],
	"license": "MIT",
	"ignore": [
	"*/.",
	"node_modules",
	"bower_components",
	"test",
	"tests"
	],
	"dependencies": {
	"wire": "~0.10.9",
	"jquery": "~2.1.1",
	"rivets": "~0.7.1",
	"rave": "~0.4.5",
	"rave-wire": "~0.2.0"
	}
	}
	<!DOCTYPE HTML>
	<html data-rave-meta="bower.json" data-debug>
	<head>
	<title>Two selects</title>
	</head>

	<body>
	<div id="meal-select">
	<div>Meal:</div>
	<select class="meal">
	<option value=""></option>
	<option value="breakfast">Breakfast</option>
	<option value="lunch">Lunch</option>
	<option value="dinner">Dinner</option>
	</select>
	</div>

	<div id="menu-select">
	<div>Menu choice:</div>
	<select class="menu">
	<option value=""></option>
	<option data-rv-each-option="menuOptions" value="{{option.value}}">
	{{option.label}}
	</option>
	</select>
	</div>
	</body>

	<script src="bower_components/rave/rave.js"></script>

	</html>
	define(["./config/rivets-config"], function() {
	return {
	$plugins: [ "wire/dom", "wire/on" ],

	model: { module: "app/model" },
	getMenuOptions: { module: "app/get-menu-options" },
	mealSelect: { $ref: "dom!meal-select" },
	menuSelect: { $ref: "dom!menu-select" },
	getSelectedValue: { module: "app/get-selected-value" },

	onChange: {
	compose: "getSelectedValue \| getMenuOptions \| model.update"
	},

	controller: {
	literal: { name: "controller" },
	on: {
	mealSelect: { "change:select": "onChange" }
	}
	},

	rivets: {
	module: "rivets",
	ready: {
	bind: [
	{ $ref: "menuSelect" },
	{ $ref: "model" }
	]
	}
	}
	};
	});
	define(["wire", "./main"], function(wire, main) {
	wire(main);
	});
	.
	\|-- app
	\| \|-- config
	\| \| `-- rivets-config.js
	\| \|-- get-menu-options.js
	\| \|-- get-selected-value.js
	\| \|-- main.js
	\| \|-- model.js
	\| `-- run.js
	\|-- bower.json
	\|-- index.html
	`-- package.json