Neurotoxin Powered Marketing

    wildvue

    1.1.1 • Public • Published

    WildVue CircleCI npm package coverage

    Vue.js 与野狗的绑定插件

    安装

    1. 如果使用<script> 全局引入: 如果Vue 存在会自动安装。
    <head>
      <!-- Vue -->
      <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> 
      <!-- Wilddog -->
      <script src="https://cdn.wilddog.com/sdk/js/2.0.0/wilddog.js"></script> 
      <!-- WildVue -->
      <script src="https://cdn.wilddog.com/libs/wild-vue/1.1.0/wildvue.min.js"></script> 
    </head>
    1. 在模块化环境中,比如CommonJS
    npm install vue wilddog wildvue --save
    var Vue = require('vue')
    var WildVue = require('wildvue')
    var wilddog = require('wilddog')
    // 在模块化环境中需要使用 user 安装
    Vue.use(WildVue)

    使用

    var wilddogApp = wilddog.initializeApp({ ... })
    var sync = wilddogApp.sync()
    var vm = new Vue({
      el: '#demo',
      wilddog: {
        //简单语法
        //默认作为数组绑定
        anArray: sync.ref('url/to/my/collection'),
        // 也可以绑定一个查询
        // anArray: sync.ref('url/to/my/collection').limitToLast(25)
        // 完整语法
        anObject: {
          source: new Wilddog('url/to/my/object'),
          // 可选,作为对象绑定
          asObject: true,
          // 可选,提供一个回调
          cancelCallback: function () {}
        }
      }
    })
    <div id="demo">
      <pre>{{ anObject | json }}</pre>
      <ul>
        <li v-for="item in anArray">{{ item.text }}</li>
      </ul>
    </div>

    上面的例子会绑定一个Vue实例的anObjectanArray 到相应的 Wilddog 数据源。另外,Vue实例也可以使用 $wilddogRefs property:

    // add an item to the array
    vm.$wilddogRefs.anArray.push({
      text: 'hello'
    })

    另外,你也可以使用 $bindAsObject$bindAsArray 方法绑定一个Wildog ref:

    vm.$bindAsObject('user', myWilddogRef.child('user'))
    vm.$bindAsArray('items', myWilddogRef.child('items').limitToLast(25))

    数据归一化

    数组绑定

    在绑定数组中的每一条记录中都会包含一个 .key property,用来表示这条记录的key。 所以,如果你有书记在 /items/-Jtjl482BaXBCI7brMT8/ , 这条记录会存在一个 .key:"-Jtjl482BaXBCI7brMT8"。 如果value是简单数据类型(boolean,string,number)会保存在.value property 中。如果value 是对象,value对象中每个property 都会直接存放在记录中:

    {
      "items": {
        "-Jtjl482BaXBCI7brMT8": 100,
        "-Jtjl6tmqjNeAnQvyD4l": {
          "first": "fred",
          "last": "Flintstone"
        },
        "-JtjlAXoQ3VAoNiJcka9": "foo"
      }
    }

    The resulting bound array stored in vm.items will be:

    [
      {
        ".key": "-Jtjl482BaXBCI7brMT8",
        ".value": 100
      },
      {
        ".key": "-Jtjl6tmqjNeAnQvyD4l",
        "first": "Fred",
        "last": "Flintstone"
      },
      {
        ".key": "-JtjlAXoQ3VAoNiJcka9",
        ".value": "foo"
      }
    ]

    贡献

    Clone the repo, then:

    $ npm install    # install dependencies 
    $ npm test       # run test suite with coverage report 
    $ npm run dev    # watch and build dist/wildvue.js 
    $ npm run build  # build dist/wildvue.js and wildvue.min.js 

    License

    MIT

    Install

    npm i wildvue

    DownloadsWeekly Downloads

    9

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • starport.ops