Question

请问我如何每10秒更新一次视图？或者只有在我的json文件中发生了某些变化时才重新渲染或重新获取此视图？

我的主要人物：

var AppRouter = Backbone.Router.extend({

routes: {
    "" : "categories",

},

initialize: function () {
    this.headerView = new HeaderView();
    $('.header').html(this.headerView.el);
},    

categories: function () {
    if (!this.CategoriesView) {
        this.CategoriesView = new CategoriesView();
    }
    $('#content').html(this.CategoriesView.el);
    this.headerView.selectMenuItem('categories-menu');
},




utils.loadTemplate(['HeaderView'], function() {
app = new AppRouter();
Backbone.history.start();

});

我的收藏：

var Categories = Backbone.Collection.extend({
url: 'api/categories_and_products.json'
});

JSON：

[
    {
        "title": "Pizza",
        "id": 1,
        "products": [{ "name" : "Romana"},{"name" : "Viennese"},{"name" : "Capricciosa"},{"name" : "Quattro formaggi"},{"name" : "Bianca"},{"name" : "Alla casalinga"}]
    },
    {
        "title": "Pasta",
        "id": 2,
        "products": [{ "name" : "Spagetti Napolitana"},{"name" : "Penne Arrabiata"},{"name" : "Tagliatelle with cream sauce"},{"name" : "Tortellini"}]
    }
]

我的类别HTML模板：

<script type="text/template" id="categories-template">        
    <% _.each(categories, function(category) { %>
        <li class="categorycls"><%= category.get('title') %></li>

        <% _.each(category.get("products"), function(product) { %>

            <li class="productscls">
            <%= product.name %>                       

            </li>

        <% }); %>
    <% }); %>                   
</script>

这是我想要一直更新的视图：

var CategoriesView = Backbone.View.extend({ 

initialize:function () {
    this.render(this);
    this.loop();
},
loop:function(){
    setInterval(function() { this.render() }, 1000)
},
render:function (that) {

    var categories = new Categories();        
    categories.fetch({
        success: function (categories) {            
        var template = _.template($('#categories-template').html(), {categories: categories.models});           
          that.$el.html(template);
        }
    })
}             
});

我不知道如何重新渲染或重新获取...我需要更新json的新数据而不刷新网站manualy ...

现在控制台每10秒就出错：

Uncaught TypeError: Object [object global] has no method 'render'

Answer 1

我添加了一个function loop，每10秒调用一次渲染

var CategoriesView = Backbone.View.extend({ 

    initialize:function () {

        this.render(this);
        this.loop();

    },
    loop:function(){

        //setInterval(render,10*1000);

        //[Edit]
        setInterval(this.render(this),10*1000);
    },

    //render:function () {
    //var that = this;

    //[Edit]

    render:function (that) {

        var categories = new Categories();        
        categories.fetch({
            success: function (categories) {            
            var template = _.template($('#categories-template').html(), {categories:     categories.models});           
              that.$el.html(template);
            }
        })

    }             
});

Answer 2

我相信正确的方法是

    loop:function(){
         var that = this;
         clearInterval(some.globally.defined.interval);
         some.globally.defined.interval = setInterval(function(){
             that.render()
         },interval);
    }

骨干setinterval（以10秒为间隔更新集合中的所有模型......）

2 个答案: