created a route for item details

front-ui/app/components/itemList.js

@@ -7,9 +7,10 @@ var ItemList = React.createClass({
     
 
     render: function() {
+        var itemClick = this.props.itemClick;
         var items = this.props.items.models.map( function(item) {
             return  (
-                 <SingleItem item={item} />
+                 <SingleItem item={item} itemClick={itemClick}/>
                  );
         });
 

front-ui/app/components/singleItem.js

@@ -1,12 +1,18 @@
-var React = require('react');
+var React = require('react'),
+    Router = require('../router');
+
 
 var SingleItem = React.createClass({
-    render: function() {
 
+
+
+    render: function() {
+        var self = this;
+        var itemClick = this.itemClick;
         var firstImage = this.state.item.get('multi_media_descriptions')[0];
         firstImage = firstImage || { url:  "http://res.cloudinary.com/lfvt7ps2n/image/upload/c_crop,g_center,w_300/v1421732950/http_www.asms.ru_bitrix_templates_main_images_nophoto_irnofq.png" } ;
-        return (
-            <div className="single_item">
+        return (    
+            <div className="single_item"  onClick={itemClick}>
              <img src={firstImage.url} />
              <h1> { this.state.item.get('name') }</h1>
              <div> { this.state.item.get('list_price') } KM </div>
@@ -15,9 +21,14 @@ var SingleItem = React.createClass({
     },
 
     getInitialState: function () {
-			return { item: this.props.item };
-	},
+			return { item: this.props.item }; 
+	}, 
+    itemClick: function(e) {
+        if(this.props.itemClick) {
+            this.props.itemClick(this.state.item, e);
+        }
+    }
 });
 
 
-module.exports = SingleItem; 
+module.exports = SingleItem;  

front-ui/app/controllers/itemDetailsController.js

@@ -0,0 +1,9 @@
+var StartPageSectionsView = require('../views/startPageSectionsView'),
+    StartPageItemsView = require('../views/startPageItemsView');
+
+function ItemDetailsController(id,slug) {
+    alert("clicked on an item" + id + " with a slug " + slug);
+    
+}
+
+module.exports = ItemDetailsController;

front-ui/app/models/item.js

@@ -2,7 +2,19 @@ var Backbone = require('backbone');
 var Globals = require('../globals');
 
 var Item = Backbone.Model.extend({
-	 urlRoot : Globals.ApiUrl + '/item'
+	 urlRoot : Globals.ApiUrl + '/item',
+
+	 getFrontEndUrl : function(withHashPrefix) {
+	 	var hashPrefix = "";
+	 	if (withHashPrefix) {
+	 		hashPrefix = "#!/";
+	 	} 
+	 	var slug = this.get('name').toLowerCase().replace(/\s+/g,"-");
+	 	return  hashPrefix + "artikal/" + this.get('id') + "/" + slug
+	 }
+
+
+
 });
 
 module.exports = Item;

front-ui/app/router.js

@@ -1,11 +1,16 @@
 var Backbone = require('backbone'),
     HomeController = require('./controllers/homeController');
+    ItemDetailsController = require('./controllers/itemDetailsController');
 
 var Router = Backbone.Router.extend({
     routes : {
         "home" : HomeController,
-        "*default": HomeController
+        "artikal/:id/:slug": ItemDetailsController,
+        "*default": HomeController    
     }
+
 });
 
+//Backbone.history.start();
+
 module.exports = Router;

front-ui/app/views/startPageItemsView.js

@@ -2,7 +2,8 @@ var Backbone = require('backbone'),
     React = require('react'),
     ItemList = require('../components/itemList'),
     ItemCollection = require('../models/itemCollection'),
-    Item = require('../models/item');
+    Item = require('../models/item'),
+    Router = require('../router');
 
 var StartPageItemsView = Backbone.View.extend({
     el: '#content',
@@ -12,7 +13,6 @@ var StartPageItemsView = Backbone.View.extend({
     },
     render: function() {
         this.$el.append(this.template);
-
         var items = new ItemCollection();
         items.setClassificationType(0);
         items.setLimit(30);
@@ -22,13 +22,21 @@ var StartPageItemsView = Backbone.View.extend({
 
            // var resultItems = items.map(function (a) { return a.attributes });
             React.render(new ItemList({            
-                items: items
+                items: items,
+                itemClick: self.itemClick
             }),
                 self.$('.item-list-container').get(0));
             
         }});
         return this;
+    },
+    itemClick: function(item) {
+
+        RIBICA.App.router.navigate(item.getFrontEndUrl(), {'trigger': true});
+
+
     }
+
 });
 
 module.exports = StartPageItemsView;

front-ui/build/index.html

@@ -2,6 +2,7 @@
 <html>
 <head>
 <link rel='stylesheet' type='text/css' href='ribica.css'>
+ <meta name="fragment" content="!">
 </head>
 <body>