backbone.js 提取数据未在模板中呈现

lmyy7pcs  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(111)

这是一个来自 Backbone 新手的问题。
所以,我尝试使用this.model.bindthis.model.on('change', this.render),但它不能为我的模型工作。我检查了我的控制台和我的模型函数getStoreByName。这是返回一个数组,但渲染函数是在提取数组之前渲染,这就是为什么我想绑定模型到视图时,模型变化。
以下是我迄今为止取得的进展。
这是 Backbone.js 视图:

var storeTemplate = Backbone.View.extend({
        initialize: function () {
            console.log('view inti is running');
            this.template = template;
            this.model = new storeModel();
            this.model.getStoreByName();
            this.stores = this.model.get('stores');
            this.model.on('change', this.render);
            console.log(this.stores);
            console.log('ready to call this.render()');
            this.render();
            console.log('end to call this.render()');
            console.log('view init end');
        },
        render: function () {
            console.log('render is start');
            this.logger.log(Logger.LOG_LEVELS.TRACE, "Entering render.");
            console.log(this.model.stores);
            this.$el.html(_.template(this.template, { stores: this.model.get('stores') }));
            return this;

        }
    });
    return storesTemplate;
});

这是我的 Backbone 模型

var store= Backbone.Model.extend({

    initialize: function () {
        console.log('init models is running');
        this.stores = [];
        this.set({ 'stores': this.stores});
        console.log(this.get('stores'));
        this.service = Service;
    },
   getStoreByName: function () {
        console.log('getting store');
        stores = [];
        this.service.getStoreByName(function (xml) {
            $(xml).find("element").each(
                function () {
                    var store = {
                        "storeID": $(this).find("ID").text(),
                        "storeType": $(this).find("Type").text(),
                        "storeName": $(this).find("Name").text(),
                    };
                    if (xml !== null) {
                        stores.push(store);
                    }
                    else {
                        this.model.set({ stores: [] });
                    }
                }
            );
            that.set('stores', store)
        },

        );
    },
})
return store;
});
5gfr0r5j

5gfr0r5j1#

尝试this.listenTo(this.model,'change:stores', this.render);
如果这不起作用,使用promises。更新模型如下:

getStoreByName: function() {
  var deferred = $.Deferred();
  var stores = [];
  return this.service.getStoreByName(function(xml) {
    if (xml === null) {
      return Deferred.resolve([]);
    }

    $(xml).find("element").each(function() {
      var store = {
        "storeID": $(this).find("ID").text(),
        "storeType": $(this).find("Type").text(),
        "storeName": $(this).find("Name").text(),
      };
      stores.push(store);
    });
    return Deferred.resolve(stores);
  });
  this.model.set('stores', stores);
  return deferred.promise();
}

在视图中可以执行this.model.getStoreByName().then(this.render);

相关问题