Awesome
tina-immutable
Immutable data for Tina.js
Setup
- Download package from npm
# ensure immutable is installed
npm i -save immutable@^4.0.0-rc.9
# install tina-immutable
npm i --save @tinajs/tina-immutable
- Install into Tina
// app.js
import Tina from '@tinajs/tina'
import ImmutablePlugin from '@tinajs/tina-immutable'
Tina.use(ImmutablePlugin)
Usage
// pages/some-page.js
import { Page } from '@tinajs/tina'
import { fromJS, Map } from 'immutable'
Page.define({
data: {
// The default values of data could be Immutable-Objects,
books: fromJS([
{ id: 1, title: 'Black Beauty' },
{ id: 2, title: '20,000 Leagues Under the Sea' },
]),
// or just any plain types.
messages: [{
{ id: 1, content: 'I thought you might sway closer each day' },
{ id: 2, content: 'All I wish I could say but you shy away.' },
}],
isLoading: false,
title: 'Favorites',
},
methods: {
more () {
let messages = this.data.get('messages')
this.setData({
messages: this.data.get('messages').push(new Map({
id: 3,
content: 'Our eyes engage but I can\'t see who\'s nearer.',
}))
})
},
},
})
// components/like.js
import { Component } from '@tinajs/tina'
import { fromJS, Map } from 'immutable'
Component.define({
properties: {
// Limited by the offical Mina framkework, properties only accepts [plain types](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/component.html).
// However, our tina-immutable plugin will transform the values of all properties to Immutable, before they are merged into ``this.data``.
item: Object,
},
data: {
like: true,
},
methods: {
toggle () {
// You can use the properties as Immutable by accessing ``this.data``.
this.triggerEvent('toggle', { item: this.data.get('item') })
},
},
})
Example
License
MIT © yelo, 2017 - present