无法解析本地 json

Question

我刚开始使用 Sencha Touch 并正在开发 2.2.1 版本。出于某种原因，我无法让我的本地 json 正确解析。我知道这不是响应问题，因为我可以在我的 chrome 开发人员工具中看到 json。

这是我的store

Ext.define('MyApp.store.Tasks', {
    extend: 'Ext.data.Store',
    requires: [
        'MyApp.model.Task'
    ],

    config: {
        autoLoad: true,
        storeId: 'tasksStore',
        model: 'MyApp.model.Task',
        proxy: {
            type: 'ajax',
            url: 'tasks.json',
            reader: {
                type: 'json',
                            rootProperty: 'tasks'
            }
        }

    }
});

这是我的Model

Ext.define('MyApp.model.Task', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            { name: 'id', type: 'int' },
            { name: 'task', type: 'string', defaultValue: 'task' }
        ]
    }
});

我正在使用Jasmine 来测试我的商店。这是我的规格

describe('MyApp.store.Tasks', function() {
  it('Number of tasks should be four', function() {
    var store = Ext.create('MyApp.store.Tasks');

    expect(store.getCount()).toBe(4);

  });
});

还有，这是我的示例 json 文件。和Sencha的index.html文件在同一个目录，也就是根目录。

{
   "tasks":[
      {
         "task":"Some Product",
         "id":0
      },
      {
         "task":"Another Product",
         "id":1
      },
      {
         "task":"A third product",
         "id":2
      },
      {
         "task":"A fourth product",
         "id":3
      }
   ]
}

是因为实例化问题吗？还是我在这里遗漏了一些关键部分？我尝试将 jsonp 用于代理类型，但它需要一个围绕响应的包装器，我不太知道该怎么做。我正在 Safari 和 Chrome 上进行测试，不幸的是，这两种浏览器的单元测试都失败了。

谢谢！

Answer 1

商店加载是异步的，因此您无法在创建它们后立即访问它们的数据。

要知道商店何时加载完毕，可以在商店的load event上收听：

var store = Ext.create('MyApp.store.Tasks');

// you cannot use the store's data yet
// expect(store.getCount()).toBe(4);

store.on('load', function(records, success) {
    if (success) {
        // here the store has been loaded
        expect(store.getCount()).toBe(4);
    }
});

或者，您也可以将回调传递给load method：

var store = Ext.create('MyApp.store.Tasks', {autoLoad: false});

store.load({
    callback: function(records, operation, success) {
        if (success) {
            // here the store has been loaded
            expect(store.getCount()).toBe(4);
        }
    }
});

现在，这意味着你也必须make your Jasmine test asynchronous：

describe('MyApp.store.Tasks', function() {
    it('Number of tasks should be four', function() {
        var result = null,
            store = Ext.create('MyApp.store.Tasks');

        store.on('load', function(store, records, success) {
            result = success;
        });

        // using jasmine async...
        waitsFor(function() {
            return result !== null;
        });

        // this functin will be executed when the one in waitsFor returns true
        runs(function() {
            expect(store.getCount()).toBe(4);
        });
    });
});