未在模板中呈现数据

Question

这是骨干新手提出的问题之一。

因此，我试图使用this.model.bind和this.model.on('change', this.render)，但是它不适用于我的模型。我检查了控制台和模型功能getStoreByName。这将返回一个数组，但是render函数在fetch数组之前渲染，这就是为什么我想在模型更改时绑定模型以进行查看。

这是我到目前为止所走的距离。

这是骨干网视图：

    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;
});

这是我的骨干模型

   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;
});

Answer 1

尝试this.listenTo(this.model,'change:stores', this.render);

如果不起作用，请使用诺言。像这样更新模型：

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);