{"id":16614613,"url":"https://github.com/wozjac/jsono-model","last_synced_at":"2025-10-16T08:19:28.724Z","repository":{"id":50447558,"uuid":"419236630","full_name":"wozjac/jsono-model","owner":"wozjac","description":"SAPUI5/OpenUI5 JSON-based model with full observability","archived":false,"fork":false,"pushed_at":"2024-11-17T14:56:33.000Z","size":42,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T10:52:24.219Z","etag":null,"topics":["openui5","sapui5","ui5"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wozjac.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-20T07:58:02.000Z","updated_at":"2024-11-17T14:56:37.000Z","dependencies_parsed_at":"2025-02-14T16:42:05.558Z","dependency_job_id":null,"html_url":"https://github.com/wozjac/jsono-model","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wozjac/jsono-model","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wozjac%2Fjsono-model","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wozjac%2Fjsono-model/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wozjac%2Fjsono-model/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wozjac%2Fjsono-model/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wozjac","download_url":"https://codeload.github.com/wozjac/jsono-model/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wozjac%2Fjsono-model/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279169189,"owners_count":26118396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-16T02:00:06.019Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["openui5","sapui5","ui5"],"created_at":"2024-10-12T02:07:03.744Z","updated_at":"2025-10-16T08:19:28.705Z","avatar_url":"https://github.com/wozjac.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SAPUI5/OpenUI5 JSONOModel\n\n**!!! Just experimental, not battle tested !!!**\n\n## Overview\n\nExperimental JSON-based model using JS Proxy for state observation (will not work in IE).\n\n## Idea\n\nIn UI5 the standard JSON Model can be set as \"observable\".\n\n_The observation feature is experimental! When observation is activated, the application can directly change the JS objects without the need to call setData, setProperty or refresh. Observation does only work for existing properties in the JSON, it cannot detect new properties or new array entries._\n\nSo in short you pass an object and later work only with this object, without calling setProperty etc. and changes are reflected in bindings and UI fields.\n\n```javascript\nconst dataObject = {\n  someValue: \"aabb\",\n};\n\nconst standardJSONModel = new JSONModel(dataObject, true);\n\nthis.getView().setModel(standardJSONModel, \"standardJSON\");\n\n// later in code\ndataObject.someValue = \"newValue\";\n// newValue visible in the UI\n```\n\nJSONOModel is similar however handles new properties and new array items. It is based on JSON Model and can be used in a similar way.\n\n## Usage\n\nThe only thing to remember is to get back and use a reference to the model data object after passing it to JSONOModel and work with this new, proxied reference.\n\n```typescript\nconst dataObject = {\n  someValue: [\"a\", \"b\"],\n};\n\nlet simpleJSONOModel = new JSONOModel(dataObject);\nthis.getView().setModel(simpleJSONOModel, \"simpleJSONOModel\");\nsimpleJSONOModel = simpleJSONOModel.getData();\n// later in code, new array values will be reflected in UI (as well as new properties), see sample app\ndataObject.someValue.push(\"c\");\n```\n\nModel data as a separate class (file model/AppViewModel.ts)\n\n```typescript\nexport class AppViewModel {\n  public getNameCounter = 0;\n\n  private _name = \"Bonifatzy\";\n  public address = { street: \"3 Piggys Aveanue\" };\n\n  public description: { personality: string } = {\n    personality: \"Nervous\",\n  };\n\n  public favorites = [\n    { label: \"French Fries\", category: \"Food\" },\n    { label: \"Rubik Cube\", category: \"Hobby\" },\n  ];\n\n  public get name(): string {\n    return this._name;\n  }\n\n  public set name(name: string) {\n    this.getNameCounter++;\n\n    if (this.getNameCounter \u003e 2) {\n      throw new Error(\"You can't update more than 2 times\");\n    }\n\n    this._name = name;\n  }\n}\n```\n\nIn the controller:\n\n```typescript\nconst separateJSONOModel = new JSONOModel(new AppViewModel());\nthis.getView().setModel(separateJSONOModel, \"separateJSONOModel\");\nthis.appViewModel = separateJSONOModel.getData();\n```\n\nTwo hooks are provided and will be called if you configure them:\n\n```typescript\nnew JSONOModel(new AppViewModel(), {\n  callOnAnyGet: true,\n  callOnAnySet: true,\n});\n```\n\nMethods will be called if present in the object:\n\n```typescript\npublic onAnyGet(propertyKey: string): void {\n  console.log(`Property ${propertyKey} was read`);\n}\n\npublic onAnySet(propertyKey: string): void {\n  console.log(`Property ${propertyKey} was set`);\n}\n```\n\n## Sample\n\nRun _npm install_ \u0026\u0026 _npm start_ to play with examples and comparison.\n\n## License\n\nThis plugin is licensed under the MIT license.\n\n## Author\n\nFeel free to contact me:\n\nwozjac@zoho.com\n\nBluesky (\u003chttps://jacekwoz.bsky.social\u003e)\n\nLinkedIn (\u003chttps://www.linkedin.com/in/jacek-wznk\u003e)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwozjac%2Fjsono-model","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwozjac%2Fjsono-model","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwozjac%2Fjsono-model/lists"}