zoukankan      html  css  js  c++  java
  • [Falcor] Intro to JSON Graph

    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>
  • 相关阅读:
    js总结 (1)数据类型以及转换的知识整理
    伪元素 hover 的几种用法总结
    一套网页 同时适配pc端和移动端的布局思路(不要怕固定定位 和百分比)
    移动端 高亮小知识 -webkit-tap-highlight-color:transparent; tap-highlight-color:transparent;
    移动端布局 viewport 用法 简单总结
    Linux系统登陆成功和登陆失败日志的查看
    Windows系统ntlm哈希与解密、本地RDP连接密码获取
    office小技巧和一些奇怪问题的汇总解决
    阿里云镜像导出至本地操作
    sqlite数据库文件的打开与读取
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4984523.html
Copyright © 2011-2022 走看看