Docs

Everything You Need to Know

Widgets

Editable List

You may have a list that you want your users to be able to modify in some way, such as change the order or deleting some items. You can provide that functionality with ChocolateChip-UI's editable list. This allows you to make a list's items movable, or deletable, or both. You set this up when you initialize the list.

You can also bind an editable list to a model. That way, when the user is done modifying the list, its changes will to synched to the model.

Simple Layout Simple Layout

Below is an example of setting up an editable list:

var myEditList = $.EditList({
  deletable: true,
  movable: true,
  model: peopleModel,
  modelProp: 'uuid',
  element: '#editList',
  view: editListView
});

In this example we set the list items to be movable and deletable. We told the list instance what model it should be bound to. We also provided a modelProp value, which in this case is a uuid. You need to use some value that is unique to each item. This allows ChocolateChip-UI to identify objects in the model to compare with the changes made by the user. We also need to indicate what view we used to render the list. ChocolateChip-UI will update the view's template to contain the elements that the editable list uses. That way if the list gets rendered after the final changes, it will be rendered with everything it needs to remail editable. When you initialize a list to be editable, ChocolateChip-UI injects a number of elements into it that were not there when it was first rendered by the view, such as for moving or deleting list items.

You can get the model that the editable list is using like this:

// Get edit list model:
var editableListModel = myEditList.getModel();

// Now we can get the list's data:
var editedListData = editableListModel.get();
// You can now persist this data locally or remotely.

Read the following instructions for getting the examples.

Editable List

See the Pen Editable List by Robert Biggs (@rbiggs) on CodePen.

Editable List with Android Theme

See the Pen Editable List forAndroid by Robert Biggs (@rbiggs) on CodePen.