Question

我有一个像googleReader这样的项目。我必须在服务器上寻呼：

/进料/ ：

返回Feed列表

/项目/ ：

返回Feed项列表。如果未设置feedId则返回所有项目。

现在在第一页我得到所有项目并在页面中显示。但我想如果用户点击链接（订阅项）项目列表获得更新。

的 SCRIPT 的

var Feeds = Backbone.Collection.extend({
    urlRoot: "/feed/?format=json", // or "/feed/?format=json&feed_id=oiasudkj34897"
});

var Items = Backbone.Collection.extend({
    urlRoot: "/item/?format=json",
});

var items = new Items();

var FeedList = Backbone.View.extend({
    el: '#feed-ul',
    render: function(){
        var feedListObj = this;
        var feeds = new Feeds();

        feeds.fetch({
            success: function(feeds){
                var feedTemplate = _.template($('#feed-list-template').html(), {feeds: feeds.models});
                feedListObj.$el.html(feedTemplate);
                $('#img-loading-feed').css('display', 'none');
            }
        });

    },
    events: {
        'click .feed-li'        : 'showFeedItem'
    },

    showFeedItem: function(e){
        // ???
    }
});

var NewFeedItems = Backbone.View.extend({
    el: '#item-ul',
    render: function(){
        var newItemListObj = this;

        items.fetch({
            success: function(){
                var itemTemplate = _.template($('#item-list-template').html(), {items: items.models});
                newItemListObj.$el.html(itemTemplate);
                $('#img-loading-item').css('display', 'none');
            }
        });
    },
    events: {
        'click .feed-item'      : 'itemSlideDown'
    },

    itemSlideDown: function(e){
        var itemId = $(e.currentTarget).attr('id');

        $('#itemview-'+itemId).toggle(function() {}, function() {});
    }
});


var LastItem = Backbone.View.extend({
    el: '#item-ul',
    render: function(){
        var itemListObj = this;


        items.fetch({
            success: function(){
                var itemTemplate = _.template($('#item-list-template').html(), {items: items.models});
                itemListObj.$el.html(itemTemplate);
                $('#img-loading-item').css('display', 'none');
            }
        });
    },
    events: {
        'click .feed-item'      : 'itemSlideDown'
    },

    itemSlideDown: function(e){
        // alert($(e.currentTarget).attr('id'));
        var itemId = $(e.currentTarget).attr('id');

        $('#itemview-'+itemId).toggle(function() {}, function() {});
    }
});

var Router = Backbone.Router.extend({
    routes: {
        '':     'home'
    }
});

var feedList = new FeedList();
var lastItem = new LastItem();

var router = new Router();

router.on('route:home', function(){
    feedList.render();
});

router.on('route:home', function(){
    lastItem.render();
});

Backbone.history.start();

的 TEMPLATE 的

<script type="text/template" id="feed-list-template">
<% _.each(feeds, function(feed)
    { %>
        <li class='feed-li' id="feed-<%= feed.get('id') %>">

        <a id="<%= feed.get('id') %>" href="#/<%= feed.get('id') %>">
        <%= feed.get('title') %>
        </a>

        </li>
        <% 
    })
%>
</script>


<script type="text/template" id="item-list-template">

<% 
_.each(items, function(item)
{
    %>
    <li class='prettyprint tar dr fs14' id="item-<%= item.get('id') %>">

    <%= 
    //other template codes
    %>
    </li>
    <% 
})
%>

</script>

我该怎么做？

Backbone.js - 更新集合并返回视图

0 个答案: