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

Package Sidebar

Install

npm i wildvue

Weekly Downloads

2

Version

1.1.1

License

MIT

Last publish

Collaborators

  • starport.ops