LiveField

GitHub

Basic Usage

Just a plain ole' text field

Name 
new LiveField({
    target: model,
    attribute: 'name'
})

Options

target Viking.Model | Viking.Collection
attribute string
render (value, target) => html Render value for display
type string text, date, duration, select, multi_select
save boolean to use .set(attrs) or .save(attrs). Defaults to typeof target.id !== undefined
container string|Element Passed to Uniform.Popover. Determines where Popover is appended. Useful when overflow and positioning issues.
inputs [] | target => Element array of objects or a function that returns elements to append. See Multiple Inputs below
labels {} Set language used in rendering form
labels.title target => text HTML for top of popover
labels.unset string HTML used for rendering when value is undefined
labels.record string | record => text HTML for labe of each record when split by record. See Collections
labels.split string | record => text Text for "Split by ____". See Collections

Select Type

Set type to select and pass options to generate a dropdown list.

Options can be structured as an array of values, or an array of arrays in the format, [value, text, selected], where selected is a boolean.

Status 
new LiveField({
    target: model,
    attribute: 'status',
    type: 'select',
    options: ['a', 'b', 'c']
})

Rendering

By default the value of the passed attribute will be rendered using toString. Pass render, a function, to render specific output.

Nickname 
new LiveField({
    target: model,
    attribute: 'status',
    render: (v, target) => `${v} / ${v.toUpperCase()}`
})

Multiple Inputs

Set inputs to declare what should be rendered in the form. This allows multiple attributes to be manipulated in one form.

Rate 
new LiveField({
    target: model,
    attribute: 'rate',
    render: (v, target) => `${target.first().get('currency')} ${v}`,
    inputs: [
        {
            type: 'number',
            attribute: 'rate'
        }, {
            type: 'select',
            attribute: 'currency'
            options: ['USD', 'EUR', 'BTC']
        }
    ]
})

Collections

LiveField can also take a collection. It will render a single value when possible and offer ability to split the form and assign independent fields.

Group Type 
new LiveField({
    target: collection,
    attribute: 'type',
    render: v => v.titleize()
})