JSON is a very commonly used data interchange format. Unfortunately while most application domain models are graphs, JSON is designed to model hierarchical information. To get around this problem, Falcor introduces JSON Graph. JSON Graph introduces references to JSON, allowing you to ensure that no object appears more than once in your JSON.

Let say we have a json data to repersent a recently watched list and newly relesase list, in both lists, there is one item is the same:

genreList: [
{
name: 'Recently Watched',
titles: [
{
id: 5221,
name: "House of Cards",
rating: 4.5
}
]
},
{
name: "New Releases",
titles: [
{
id: 5221,
name: "House of Cards",
rating: 4.5
}
]
}
]

Then in recently watched list, I want to give "House of Cards" 5 rating:

        model.setValue('genreList[0].titles[0].rating', 5)
.then(function (value) {
model.get('genreList[0..1].titles[0]["name","rating"]')
.then(function (json) {
console.log(JSON.stringify(json, null, 3));
})
});

Here we set the rating as '5', then we print out the list again:

{
"json": {
"genreList": {
"0": {
"titles": {
"0": {
"name": "House of Cards",
"rating": 5
}
}
},
"1": {
"titles": {
"0": {
"name": "House of Cards",
"rating": 4.5
}
}
}
}
}
}

As we can see from the result, the first item is rated as 5, but the second item still renaming 4.5 . But they reperesnt the same item, what we want my rating can affect the item's rating all lists.

But with json, it is hard to do that. That's why we need JSON Graph.

You can convert a json object into a jon graph in two step:

  1. Each json repersent item should have a unqie id, then you can use the unqie id as key to map object.
  2. Replace the original data with the json graph ref.
cache: {
titleById: {
5221: {
// id: 5221,
name: "House of Cards",
rating: 4.5
}
},
genreList: [
{
name: 'Recently Watched',
titles: [
{$type: 'ref', value: "titleById[5221]"}
]
},
{
name: "New Releases",
titles: [
{$type: 'ref', value: "titleById[5221]"}
]
}
]
}

5221 is the unqie id to repersent the json object.

Actually there is a helper method can help to refactor the code:

cache: {
titleById: {
5221: {
// id: 5221,
name: "House of Cards",
rating: 4.5
}
},
genreList: [
{
name: 'Recently Watched',
titles: [
$ref("titleById[5221]")
]
},
{
name: "New Releases",
titles: [
$ref("titleById[5221]")
]
}
]
}

----------------------------------------

<!-- index.html -->
<html>
<head>
<!-- Do _not_ rely on this URL in production. Use only during development. -->
<script src="//netflix.github.io/falcor/build/falcor.browser.js"></script>
<script>
var $ref = falcor.Model.ref;
var model = new falcor.Model({
cache: {
titleById: {
5221: {
// id: 5221,
name: "House of Cards",
rating: 4.5
}
},
genreList: [
{
name: 'Recently Watched',
titles: [
$ref("titleById[5221]")
]
},
{
name: "New Releases",
titles: [
$ref("titleById[5221]")
]
}
]
}
}); model.setValue('genreList[0].titles[0].rating', 5)
.then(function (value) {
model.get('genreList[0..1].titles[0]["name","rating"]')
.then(function (json) {
console.log(JSON.stringify(json, null, 3));
})
});
</script>
</head>
<body>
</body>
</html>

[Falcor] Intro to JSON Graph的更多相关文章

  1. Netflix Falcor获取JSON数据

    Netflix开源了JavaScript库Falcor,它为从多个来源获取JSON数据提供了模型和异步机制. Netflix利用Falcor库实现通过JSON数据填充他们网页应用的用户界面.所有来自内 ...

  2. Falcor 学习一基本使用

    falcor 是netflix 公司为了解决自己api数据查询所开发的查询框架,很不错(尽管netflix 也在用graphql )以下是falcor 的 一个简单使用,基于express 框架,使用 ...

  3. ASP.NET如何使用JSON

    关于json,有一个官网:http://www.json.org 上面介绍了每种语言生成json格式的类库,我们只要把他们下载解压之后调用他们其中的组件即可,在.net中我用的是Newtonsoft. ...

  4. [Falcor] Return the data from server

    <!-- index.html --> <html> <head> <!-- Do _not_ rely on this URL in production. ...

  5. Newtonsoft.Json 序列化踩坑之 IEnumerable

    Newtonsoft.Json 序列化踩坑之 IEnumerable Intro Newtonsoft.Json 是 .NET 下最受欢迎 JSON 操作库,使用起来也是非常方便,有时候也可能会不小心 ...

  6. Newtonsoft.Json 指定某个属性使用特定的时间格式

    Newtonsoft.Json 指定某个属性使用特定的时间格式 Intro Newtonsoft.Json 是 .NET 下最受欢迎 JSON 操作库,原为 JSON.Net 后改名为 Newtons ...

  7. open-falcon监控系统

    官方文档 https://book.open-falcon.org/zh/intro/index.html 一.Open-Falcon介绍 1.监控系统,可以从运营级别(基本配置即可),以及应用级别( ...

  8. 基于谷歌地图的Dijkstra算法水路路径规划

    最终效果图如下: 还是图.邻接表,可以模拟出几个对象=>节点.边.路径.三个类分别如下: Node 节点: using System; using System.Collections.Gene ...

  9. beego中orm关联查询使用解析

    这两天在学习beego框架,之前学习的时候遗漏了很多东西,比如orm.缓存.应用监控.模板处理等,这里将通过实例记录下如何使用beego自带的orm进行关联查询操作. 首先说明下,beego的orm有 ...

随机推荐

  1. linux中挂载硬盘报错(you must specify the filesystem type)

    公司有台服务器做了raid1,由于容量小,需扩容,原先打算再添加两块硬盘进去做多一组raid1,组成两组raid1混合使用,但是公司抠门,买到服务器只能安装3块硬盘,无奈之下只能放多一块进去单独挂载分 ...

  2. NHibernate考察实例:简单映射

    建立一个Company类用来测试,对应的表为TBLCOMPANY.   1. 下载NHibernate(版本1.2.0.CR1),将NHibernate \bin\net-2.0下面的文件拷贝到lib ...

  3. Web Services

    Web Services 1.       Web Services基本规范概述 1.1.   什么是Web Services Web Services是为实现“基于Web无缝集成”的目标而提出的全新 ...

  4. jQuery MVC 科室异步联动

    //科室改变,级联医生 js $("#DepartmentId").change(function () { if (isNaN($(this).val())) { $(" ...

  5. 解决WebService本地访问正常,远程无法访问的问题

    发布webservice后部署到自己的服务器上,然后本机,外网远程访问都没事,在用户服务器上部署后只能本机访问,远端访问不了,通过网络搜索到下面方法,但改后仍然不行.原来在自己服务器部署时是在默认网站 ...

  6. HTML&CSS基础学习笔记1.30-颜色的表达

    颜色的表述 在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 ...

  7. PPT2010中设置音乐播放停止位置

    ppt不仅只是制作幻灯片的效果,而且在制作幻灯片过程中,由于内容很多,每个版块想要呈现的效果是不同的,那么配乐的风格自然也是不同.如何让我们插入的音乐在合适的内容的时候播放和停止呢,下面就来教大家具体 ...

  8. Sublime Text 3 中文汉化绿色破解特别版下载

    Sublime Text是一款代码编辑器,几乎支持所有语言的编写.sublime给人们的印象不外乎小巧.速度快.并且快捷键丰富而强大.不知繁多的插件. sublime一般被应用到前端的开发.Subli ...

  9. MFC枚举USB设备碰到的一个疑难,还没解决

    代码如下: 打开USB Hub设备之后,返回句柄hHubDevice,然后使用EnumerateHubPorts来枚举Hub的端 口.疑问在代码的中文注释中. bool CUsbEnumHub::En ...

  10. 浅析hashCode方法

    一.问题引入 谈到hashCode就不得不说equals方法,二者均在Object类里,由于Object类是所有类的基类,所以一切类里都可以重写这两个方法. 要想较清晰的理解,需要先知道容器Colle ...