Question

我想知道如何准确使用qx.data.store.Json-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仅从服务器获取数据。我不知道如何使用addUser实现deleteUser或qx.data.store.Json - 无法在商店内部使用的Xhr上设置请求数据。从qooxdoo手册：“商店组件的主要目的是从源加载数据并将该数据转换为模型。”没有关于在那里写回服务器的事实 - 事实上，唯一明确的读写存储是离线存储 - 它利用了本地存储。

如果我正确理解您的问题，您需要使用qx.io.rest.Resource来获取，添加和删除（并且可能还会更新）服务器上的用户和文档。通过此，您可以将URL和http谓词的组合映射到用户和文档的服务器端操作。这还允许您设置要发送的数据以进行添加和更新等操作。您可以通过监听资源本身上的success事件来获取资源上调用的异步操作返回的数据 - 响应中的任何数据都将出现在事件的data属性中。 / p>

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

Answer 2

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

Qooxdoo data layer

可以通过子类化qx.data.store.Json来创建读写JSON存储。它的模型是普通的Qooxdoo数据对象。你可以绑定它，你可以听它的变化（商店创建模型与冒泡变化），等等。

这是列表控制器的示例，其模型为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)

这是演示的runnable snippet。如果高级绑定到qx.data.Array，请注意bug#8127，团队不急于修复。但用户代码修复is possible。

如何使用qx.data.store.Json

2 个答案: