增加新闻分类

　　现在我们讨论如何增加一个新闻分类，这将在populateSingleNews()中实现。而populateSingleNews()中是根据返回的XML使用jQuery进行解析，将解析后的结果通过jQuery Mobile的UI展现出来。为了方便讨论，先选取一段Yahoo News返回的RSS进行讨论，如下：

<rss>
  <channel>
    ...
    <category>business</category>
    <description>Business News</description>
    ...
    <item>
      ...
      <title>Retirement Looms: Time to Get Nervous (BusinessWeek)</title>
      ...
    </item>
    <item>
      ...
      <title>European stocks rise as Japan pledges help (AFP)</title>
      ...
    </item>
    ...
  </channel>
</rss>

 　　上面是Business分类下的两条新闻的RSS XML文件摘录，其中对XML的解析结果会保存在currentNews变量中。接下来，将分步介绍populateSingleNews方法的实现。

　　1)获得新闻分类和新闻分类的描述

var CATEGORY = 'category';
var DESCR = 'description';
...
function populateSingleNews(xml)...{
  var tmpTxt = $(xml).find(CATEGORY).first().text();
  var desc = $(xml).find(DESCR).first().text();
  ...
}

 　　首先，我们调用jQuery的find().first().text()方法去解析xml，分别获得了分类的目录和描述，以上面的xml为例子，得到的结果是tmpTxt='business' 和desc='Business News'.

　　2) 获得新闻分类的列表

var CAT_ = 'cat_';
var _D = '_d';
var _LI = '_li';
var _A = '_a';
...
function populateSingleNews(xml)...{
  ...
  var category = CAT_ + tmpTxt;
  var categoryDel = category + _D;
  var categoryLi = categoryDel + _LI;
  var categoryA = category + _A;
  ...
}

 　　上面的代码，实际上会组合成如下形式的变量：

category='cat_business'
categoryDel='cat_business_d'
categoryLi='cat_business_d_li'
categoryA='cat_business_a'Next

 　　接下来，为了重用代码，我们编写了如下的代码段：

var HTML_FRG1 = '<li id="';
var HTML_FRG2 = '"><h3><a id="';
var HTML_FRG3 = '"  href="#">';
var HTML_FRG4 = '</a></h3><p id="';
var HTML_FRG5 = '"></p><a href="#" data-transition="slideup" id="';
var HTML_FRG6 = '"/></li>';

 　　最后，将上述的代码添加到currentNews后，代码如下：

var currentNewsVar = $('#currentNews');
...
function populateSingleNews(xml)...{
   ...
   $(HTML_FRG1 + categoryLi + HTML_FRG2 + categoryA + HTML_FRG3 + desc + HTML_FRG4 + category + HTML_FRG5 +
      categoryDel + HTML_FRG6).prependTo(currentNewsVar);
   ...
}

 　　实际上，以上代码的效果就会使用jQuery中的prependTo()方法，把如下的代码加到id="currentNews"的元素之后，即：

<li id="cat_business_d_li">
   <h3><a id="cat_business_a"  href="#">Business News</a></h3>
   <p id="cat_business"></p>
   <a href="#" data-transition="slideup" id="cat_business_d"/>
</li>

 　　如果你还不是很清楚的话，下面这个图，将生动的讲解了其对应的结构：

▲图1 新闻分类列表DOM结构图

　　这里的p标签，即id="cat_business"部分，是稍后用来做动画变化时用到的；

　　观察这里的<a id="cat_business_d">标签，这个标签是用来当点右边的删除按钮时，产生的删除事件效果时要用到的Business News；

　　data-split-icon样式是使用了jQuery Mobile中默认的删除按钮；

　　The data-split-theme属性指定使用了什么风格样式的删除按钮，这里我们使用了d样式的风格删除按钮，如果不指定的话，默认使用的是a风格样式的按钮。

　　接下来，我们将讨论

　　　　处理删除按钮事件
　　　　处理当用户点每个新闻分类时，跳转到具体的新闻分类下的新闻列表事件
　　　　学习如何设计新闻分类标题出现时的动画效果
　　　　处理删除按钮事件

　　处理删除按钮事件的代码如下：

function populateSingleNews(xml)...{
   ...
   var newDeleteItem = document.getElementById(categoryDel);
   $(newDeleteItem).click(function() ...{
     $.doTimeout( categoryLi, false );
     var newListItem = document.getElementById(categoryLi);
     $(newListItem).remove();
     storeCurrentNews();
   });
   ...
}

 　　还记得categoryLi='cat_business_d_li'么?我们调用了$.doTimeout( categoryLi, false )去实现了当删除新闻分类时，出现的动画效果。$.doTimeout是来自插件jquery-dotimeout-plugin实现的功能，我们在稍侯的动画部分将会详细讨论。接下来找到了新闻分类的标记newListItem并使用jQuery的remove()方法将其删除。在删除新闻分类后，再调用storeCurrentNews()方法，重新将当前剩下的新闻分类进行保存，这个方法稍后会详细讨论。