snipt

Ctrl+h for KB shortcuts

JavaScript+Genshi Text

Ch 2 - e.rowData properties

/*
we assign properties from the JSON as custom properties of the row
this is so on your click event, you can access the row object and then pull the custom properties we set out of it

NB: You could also just create a property called "feedInfo" or something, and assign the JSON node to that, I have just used simple named properties because it's an easier example to follow I think.
*/
var row = Titanium.UI.createTableViewRow({
        hasChild: true,
	className: 'recipe-row',
	backgroundColor: '#fff',
	filter: jsonObject.query.results.item[i].title, //this is the data we want to search on (title),			
	_title: jsonObject.query.results.item[i].title,
	_description: jsonObject.query.results.item[i].description,
	_link: jsonObject.query.results.item[i].link
});


/*
and now back down where the tablerow event listener occurs
*/


//create a new window and pass through data from the tapped row
tblRecipes.addEventListener('click', function(e){
	var selectedRow = e.rowData; //row index clicked

	var detailWindow = Titanium.UI.createWindow({
		title: selectedRow._title,
		_description:  selectedRow._description,
		_link: selectedRow._link,
		backgroundColor: '#fff',
		id: 0
	});
https://snippets.siftie.com/embed/df23479e8131236e0da303cbe14c266e/
/raw/df23479e8131236e0da303cbe14c266e/
df23479e8131236e0da303cbe14c266e
js+genshitext
JavaScript+Genshi Text
33
2019-03-22T22:25:42
True
False
False
/api/public/snipt/34690/
ch-2-erowdata-properties
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a> <a href="#L-25">25</a> <a href="#L-26">26</a> <a href="#L-27">27</a> <a href="#L-28">28</a> <a href="#L-29">29</a> <a href="#L-30">30</a> <a href="#L-31">31</a> <a href="#L-32">32</a> <a href="#L-33">33</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="cm">/*</span> </span><span id="L-2"><a name="L-2"></a><span class="cm">we assign properties from the JSON as custom properties of the row</span> </span><span id="L-3"><a name="L-3"></a><span class="cm">this is so on your click event, you can access the row object and then pull the custom properties we set out of it</span> </span><span id="L-4"><a name="L-4"></a> </span><span id="L-5"><a name="L-5"></a><span class="cm">NB: You could also just create a property called &quot;feedInfo&quot; or something, and assign the JSON node to that, I have just used simple named properties because it&#39;s an easier example to follow I think.</span> </span><span id="L-6"><a name="L-6"></a><span class="cm">*/</span> </span><span id="L-7"><a name="L-7"></a><span class="kd">var</span> <span class="nx">row</span> <span class="o">=</span> <span class="nx">Titanium</span><span class="p">.</span><span class="nx">UI</span><span class="p">.</span><span class="nx">createTableViewRow</span><span class="p">({</span> </span><span id="L-8"><a name="L-8"></a> <span class="nx">hasChild</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> </span><span id="L-9"><a name="L-9"></a> <span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;recipe-row&#39;</span><span class="p">,</span> </span><span id="L-10"><a name="L-10"></a> <span class="nx">backgroundColor</span><span class="o">:</span> <span class="s1">&#39;#fff&#39;</span><span class="p">,</span> </span><span id="L-11"><a name="L-11"></a> <span class="nx">filter</span><span class="o">:</span> <span class="nx">jsonObject</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">results</span><span class="p">.</span><span class="nx">item</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">title</span><span class="p">,</span> <span class="c1">//this is the data we want to search on (title), </span> </span><span id="L-12"><a name="L-12"></a> <span class="nx">_title</span><span class="o">:</span> <span class="nx">jsonObject</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">results</span><span class="p">.</span><span class="nx">item</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">title</span><span class="p">,</span> </span><span id="L-13"><a name="L-13"></a> <span class="nx">_description</span><span class="o">:</span> <span class="nx">jsonObject</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">results</span><span class="p">.</span><span class="nx">item</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">description</span><span class="p">,</span> </span><span id="L-14"><a name="L-14"></a> <span class="nx">_link</span><span class="o">:</span> <span class="nx">jsonObject</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">results</span><span class="p">.</span><span class="nx">item</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">link</span> </span><span id="L-15"><a name="L-15"></a><span class="p">});</span> </span><span id="L-16"><a name="L-16"></a> </span><span id="L-17"><a name="L-17"></a> </span><span id="L-18"><a name="L-18"></a><span class="cm">/*</span> </span><span id="L-19"><a name="L-19"></a><span class="cm">and now back down where the tablerow event listener occurs</span> </span><span id="L-20"><a name="L-20"></a><span class="cm">*/</span> </span><span id="L-21"><a name="L-21"></a> </span><span id="L-22"><a name="L-22"></a> </span><span id="L-23"><a name="L-23"></a><span class="c1">//create a new window and pass through data from the tapped row</span> </span><span id="L-24"><a name="L-24"></a><span class="nx">tblRecipes</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span> </span><span id="L-25"><a name="L-25"></a> <span class="kd">var</span> <span class="nx">selectedRow</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">rowData</span><span class="p">;</span> <span class="c1">//row index clicked</span> </span><span id="L-26"><a name="L-26"></a> </span><span id="L-27"><a name="L-27"></a> <span class="kd">var</span> <span class="nx">detailWindow</span> <span class="o">=</span> <span class="nx">Titanium</span><span class="p">.</span><span class="nx">UI</span><span class="p">.</span><span class="nx">createWindow</span><span class="p">({</span> </span><span id="L-28"><a name="L-28"></a> <span class="nx">title</span><span class="o">:</span> <span class="nx">selectedRow</span><span class="p">.</span><span class="nx">_title</span><span class="p">,</span> </span><span id="L-29"><a name="L-29"></a> <span class="nx">_description</span><span class="o">:</span> <span class="nx">selectedRow</span><span class="p">.</span><span class="nx">_description</span><span class="p">,</span> </span><span id="L-30"><a name="L-30"></a> <span class="nx">_link</span><span class="o">:</span> <span class="nx">selectedRow</span><span class="p">.</span><span class="nx">_link</span><span class="p">,</span> </span><span id="L-31"><a name="L-31"></a> <span class="nx">backgroundColor</span><span class="o">:</span> <span class="s1">&#39;#fff&#39;</span><span class="p">,</span> </span><span id="L-32"><a name="L-32"></a> <span class="nx">id</span><span class="o">:</span> <span class="mi">0</span> </span><span id="L-33"><a name="L-33"></a> <span class="p">});</span> </span></pre></div> </td></tr></table>
javascript, titanium