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. How JSP work.

    A JSP page exists in three forms: JSP source code: consists of a mix of HTML template code. Java lan ...

  2. Set Keep-Alive Values---C到C#代码的转换

    一.什么是Keep-Alive模式? 我们知道HTTP协议采用“请求-应答”模式,当使用普通模式,即非KeepAlive模式时,每个请求/应答客户和服务器都要新建一个连接,完成 之后立即断开连接(HT ...

  3. WPF Binding

    winform有binding, WPF也有binding,区别在哪呢?这里暂时不提.以前也检查接触WPF binding, 但为什么过段时间就忘记了呢? 可能主要原因自己的知识体系不够完善吧,下面我 ...

  4. Java学习----Java程序结构

    1.什么是类 在源文件中程序员自己定义的通过class关键字,自己给类名这样的定义的一个类,而类里包含一个或多个方法 2.什么是源文件 由程序员使用java语言编写的以.java为结尾的一个文件 3. ...

  5. 07_RHEL7配置yum源

    redhat 默认自带的 yum 源需要注册才能更新.想不花钱也可以更新,就需要替换掉redhat的yum源. 检查是否安装yum包 查看RHEL是否安装了yum,若是安装了,那么又有哪些yum包: ...

  6. 文件操作-php

    <?php /* 建立缓存 可以用文件长时间保存数据 文件是以liunux为模型的 在Windows下只能获取file ,dir unknow linux 下可以获取block char dir ...

  7. case 后面可以接汉语

    switch($_POST['rtype']){        case "图片":         $type="image";break;        c ...

  8. jquery mobile展开项collapsible

    代码演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  9. eval("("+json对象+")")

    var obj=eval("("+data+")"); 看看下面这条,应该能想到json的数据结构“+(json对象名)+”由于json是以”{}”的方式来开始 ...

  10. 关于PHP参数的引用传递和值传递

    如果希望编写一个名为increment()的函数来增加一个变量的值,我们可能会按如下方式编写这个函数: 这段代码是没有用的.下面测试代码的输出结果是“10”. $value 的内容没有被修改.这要归因 ...