如何使用qx.data.store.Json

Question

我想知道如何准确地使用qx.data.store.jon-Store。就我而言，我有f.e。这种方法是在webservice中实现的：

• getUser
• addUser
• deleteUser
• addDocument
• getDocument
• deleteDocument

我现在的问题是:我是否必须创建一个存储(从qx.data.store.Json扩展)并实现以下方法：

var store = new myapp.store.MyJsonStore(url);
var user = store.getUser("testuser");

还是应该对上面的所有方法使用原始的qx.data.store.Json？像这样：

var store = new qx.data.store.Json("http://localhost:1234/users/testuser");
var user = store.getModel();

在第二种情况下，我必须再次为每个请求创建存储，并使其成为f.e。异步。

托拜厄斯

Answer 1

qx.data.store.Json是只读存储实现.它只设置它的模型属性，该值从从传递给其构造函数的qx.data.marshal.Json中检索的JSON转换而来。一般来说，在are数据层设计中，所有的连接都是双向的。

​

​

可以通过子类qx.data.store.Json来存储读写JSON。它的模型是正常的Its数据对象。您可以绑定到它，您可以侦听它的更改(存储创建了带有冒泡变化的模型)等等。

下面是列表控制器的例子，它的模型是qx.data.Array。它的更改事件有类型(添加、删除和其他)。因此，当模型发生更改时，您可以发出相应的请求。后端是虚拟RPC的CherryPy应用程序。请注意，这是一个演示代码，它不释放请求对象，侦听失败事件，以及在实际代码中应该做的其他事情。

JsonStore.js

qx.Class.define('adhoc.JsonStore', {

  extend : qx.data.store.Json,

  construct : function(baseUrl, delegate)
  {
    this.base(arguments, baseUrl + '/list', delegate);

    this._baseUrl = baseUrl;

    // can't refine model property to set apply method because
    // it has not init value
    this.addListener('changeModel', this._onChangeModel, this);
  },

  members : {

    _baseUrl : null,


    _create : function(entry)
    {
      var request = new qx.io.request.Xhr(this._baseUrl + '/create');
      request.setAccept('application/json');
      request.setParser('json');
      request.setRequestData(qx.util.Serializer.toNativeObject(entry));
      request.addListener('success', this.reload, this);
      request.send();
    },

    _remove : function(entry)
    {
      var request = new qx.io.request.Xhr(this._baseUrl + '/remove');
      request.setAccept('application/json');
      request.setParser('json');
      request.setRequestData({'id': entry.getId()});
      request.send();      
    },

    _onChagneModelDataArray : function(event)
    {
      var change = event.getData();
      if(change.type == 'add')
      {
        this._create(change.added[0]);
      }
      else if(change.type == 'remove')
      {
        this._remove(change.removed[0]);
      }
    },

    _onChangeModel : function(event)
    {
      var model = event.getData();
      model.addListener('change', this._onChagneModelDataArray, this);
    }

  }

});

Application.js

qx.Class.define('adhoc.Application', {

  extend : qx.application.Standalone,

  members : {

    main : function()
    {
      this.base(arguments);

      if(qx.core.Environment.get('qx.debug'))
      {
        qx.log.appender.Native;
        qx.log.appender.Console;
      }


      var list = new qx.ui.form.List();
      list.setWidth(120);

      var controller = new qx.data.controller.List(null, list);
      controller.setLabelPath('name');
      controller.setLabelOptions({'converter': function(value, model) 
      {
        return model.getId() + ':' + value;
      }});

      var store = new adhoc.JsonStore('/document');
      store.bind('model', controller, 'model');


      var create = new qx.ui.form.Button('Create');
      create.addListener('execute', function()
      {
        var name = window.prompt('Enter document name');
        if(name)
        {
          controller.getModel().push(qx.data.marshal.Json.createModel({
            'id'   : null,
            'name' : name
          }));
        }
      });

      var remove = new qx.ui.form.Button('Remove');
      controller.bind('selection[0]', remove, 'enabled',{'converter':Boolean});
      remove.addListener('execute', function()
      {
        var confirmed = window.confirm('Remove selected document?');
        if(confirmed)
        {
          controller.getModel().remove(controller.getSelection().getItem(0));
        }
      });


      var root = this.getRoot();
      root.add(create, {'left': 10, 'top': 10});
      root.add(remove, {'left': 70, 'top': 10});
      root.add(list,   {'left': 10, 'top': 40});
    }

  }

});

app.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-


import os

import cherrypy


path   = os.path.abspath(os.path.dirname(__file__))
config = {
  'global' : {
    'server.socket_host' : '127.0.0.1',
    'server.socket_port' : 8080,
    'server.thread_pool' : 8
  },
  '/static' : {
    'tools.staticdir.on'  : True,
    'tools.staticdir.dir' : os.path.join(path, 'qxjsonstore')
  }  
}


class Document:

  _store = None


  def __init__(self):
    self._store = {
      1 : {'id': 1, 'name': 'foo'},
      2 : {'id': 2, 'name': 'bar'},
      3 : {'id': 3, 'name': 'baz'},
      4 : {'id': 4, 'name': 'qux'},
    }

  @cherrypy.expose
  @cherrypy.tools.json_out()
  def list(self):
    return self._store.values()

  @cherrypy.expose
  @cherrypy.tools.json_out()
  def create(self, **kwargs):
    id = max(self._store.keys()) + 1
    self._store[id] = {'id': id, 'name': kwargs['name']}
    return id

  @cherrypy.expose
  @cherrypy.tools.json_out()
  def remove(self, id):
    del self._store[int(id)]


class App:

  document = None


  def __init__(self):
    self.document = Document()

  @cherrypy.expose
  def index(self):
    return '''<!DOCTYPE html>
      <html>
      <head>
        <!-- Demo is built on qx.js from the framework's build-all job. 
             Do not use it in real application because it includes all
             Qooxdoo classes.
        -->
        <script type="text/javascript">
          var qx = {};
          qx.$$environment = {"qx.application": "adhoc.Application"};
        </script>
        <script type="text/javascript" src="/static/qx.js"></script>
        <script type="text/javascript" src="/static/app.js"></script>
      </head>
      <body></body>
      </html>
    '''


if __name__ == '__main__':
  cherrypy.quickstart(App(), '/', config)

下面是演示的可运行的片段。此外，对于qx.data.Array的高级绑定，请注意团队不急于修复的bug#8127。不过，用户代码修复了是可能的。

Answer 2

qx.data.store.Json只从服务器获取数据。我不知道如何使用addUser或deleteUser实现qx.data.store.Json --无法在商店内部使用的Xhr上设置请求数据。在qooxdoo手册中：“存储组件的主要目的是从源加载数据并将数据转换为模型。”不需要写回服务器--事实上，唯一显式的read+write存储是脱机存储--它使用本地存储。

如果我正确理解您的问题，您需要使用qx.io.rest.Resource在服务器上获取、添加和删除(可能还会更新)用户和文档。这样，您就可以将URL和http谓词的组合映射到用户和文档的服务器端操作。这还允许您设置数据以发送诸如添加和更新之类的操作。您可以通过侦听资源本身上的success事件来获取资源上调用的异步操作返回的数据--无论响应中有什么数据，它都将位于事件的data属性中。

然后，您可以通过qx.data.marshal.Json自动将事件中包含的JSON转换为qooxdoo对象，然后将得到的模型设置为控制器的模型属性。它将创建与qx.data.store中的存储库相同的类类型。