From fe7d0b6c9fb76c919d61d16a0de3bc9da89b3fc3 Mon Sep 17 00:00:00 2001
From: Leo Horie <leohorie@hotmail.com>
Date: Mon, 29 Jun 2015 18:59:41 -0400
Subject: [PATCH] fix select2 example

---
 docs/integration.md | 141 +++++++++++++++++++++++---------------------
 1 file changed, 75 insertions(+), 66 deletions(-)

diff --git a/docs/integration.md b/docs/integration.md
index b470e66e..81c94a5c 100644
--- a/docs/integration.md
+++ b/docs/integration.md
@@ -7,80 +7,89 @@ It's recommended that you encapsulate integration code in a component or a helpe
 The example below shows a simple component that integrates with the [select2 library](http://ivaynberg.github.io/select2/).
 
 ```javascript
-//Select2 component (assumes both jQuery and Select2 are included in the page)
 var Select2 = {
-	//this view implements select2's `<select>` progressive enhancement mode
-	view: function(ctrl) {
-		return m("select", {config: select2.config(ctrl)}, [
-			ctrl.data.map(function(item) {
-				return m("option", {value: item.id}, item.name)
+	//	Returns a select box
+	view: function(ctrl, attrs) {
+		var selectedId = attrs.value().id;
+        //Create a Select2 progrssively enhanced SELECT element
+		return m("select", {config: Select2.config(attrs)}, [
+			attrs.data.map(function(item) {
+				var args = {value: item.id};
+				//	Set selected option
+				if(item.id == selectedId) {
+					args.selected = "selected";
+				}
+				return m("option", args, item.name);
 			})
 		]);
-	}
-};
-
-/**
-Select2 config factory. The params in this doc refer to properties of the `ctrl` argument
-@param {Object} data - the data with which to populate the <option> list
-@param {number} value - the id of the item in `data` that we want to select
-@param {function(Object id)} onchange - the event handler to call when the selection changes.
-	`id` is the the same as `value`
-*/
-Select2.config = function(ctrl) {
-	return function(element, isInitialized) {
-		var el = $(element);
-		
-		if (!isInitialized) {
-			//set up select2 (only if not initialized already)
-			el.select2()
-				//this event handler updates the controller when the view changes
-				.on("change", function(e) {
-					//integrate with the auto-redrawing system...
-					m.startComputation();
-					
-					//...so that Mithril autoredraws the view after calling the controller callback
-					if (typeof ctrl.onchange == "function") ctrl.onchange(el.select2("val"));
-					
-					m.endComputation();
-					//end integration
-				});
-		}
-		
-		//update the view with the latest controller value
-		el.select2("val", ctrl.value);
-	}
-}
-
-//end component
-
-
-
-//usage
-var Dashboard = {
-	controller: function() {
-		//list of users to show
-		var data = [{id: 1, name: "John"}, {id: 2, name: "Mary"}, {id: 3, name: "Jane"}]
-		
-		return {
-			data: data,
-			
-			//select Mary
-			currentUser: data[1],
-			
-			changeUser: function(id) {
-				console.log(id)
-			}
-		}
 	},
+	/**
+	Select2 config factory. The params in this doc refer to properties of the `ctrl` argument
+	@param {Object} data - the data with which to populate the <option> list
+	@param {prop} value - the prop of the item in `data` that we want to select
+	@param {function(Object id)} onchange - the event handler to call when the selection changes.
+		`id` is the the same as `value`
+	*/
+	//	Note: The config is never run server side.
+	config: function(ctrl) {
+		return function(element, isInitialized) {
+			if(typeof jQuery !== 'undefined' && typeof jQuery.fn.select2 !== 'undefined') {
+				var el = $(element);
+				if (!isInitialized) {
+					el.select2()
+						.on("change", function(e) {
+							var id = el.select2("val");
+							m.startComputation();
+                            //Set the value to the selected option
+							ctrl.data.map(function(d){
+								if(d.id == id) {
+									ctrl.value(d);
+								}
+							});
 
-	view: function(ctrl) {
-		return m("div", [
-			m("label", "User:"),
-			m.component(Select2, {data: ctrl.data, value: ctrl.currentUser.id, onchange: ctrl.changeUser})
-		]);
+							if (typeof ctrl.onchange == "function"){
+								ctrl.onchange(el.select2("val"));
+							}
+							m.endComputation();
+						});
+				}
+				el.val(ctrl.value().id).trigger("change");
+			} else {
+				console.warn('ERROR: You need jquery and Select2 in the page');	
+			}
+		};
 	}
 };
 
+var Dashboard = {
+    controller: function() {
+        var ctrl = this,
+          //list of users to show
+          data = [
+            {id: 1, name: "John"}, 
+            {id: 2, name: "Mary"}, 
+            {id: 3, name: "Seniqua"}
+          ];
+      
+        ctrl.data = data;
+        //  Has to use a prop for the current user
+        ctrl.currentUser = m.prop(data[1]);
+        ctrl.changeUser = function(id) {
+          console.log(id);
+        };
+    },
+
+    view: function(ctrl) {
+        return m("div", [
+            m("label", "User:"),
+            m.component(Select2, {
+              data: ctrl.data, 
+              value: ctrl.currentUser, 
+              onchange: ctrl.changeUser
+            })
+        ]);
+    }
+};
 
 m.mount(document.body, Dashboard);
 ```