Vue.js 与野狗的绑定插件
- 如果使用
<script>全局引入： 如果Vue存在会自动安装。
<head>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<!-- Wilddog -->
<script src="https://cdn.wilddog.com/sdk/js/current/wilddog.js"></script>
<!-- WildVue -->
<script src="https://cdn.wilddog.com/libs/wild-vue/1.0.4/wildvue.min.js"></script>
</head>- 在模块化环境中，比如CommonJS
npm install vue wilddog wildvue --savevar Vue = require('vue')
var WildVue = require('wildvue')
var Wilddog = require('wilddog')
// 在模块化环境中需要使用 user 安装
Vue.use(WildVue)var vm = new Vue({
el: '#demo',
wilddog: {
//简单语法
//默认作为数组绑定
anArray: new Wilddog('url/to/my/collection'),
// 也可以绑定一个查询
// anArray: new Wilddog('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实例的anObject 和 anArray 到相应的 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent