Adding Items to List with KnockoutJS – Jeff Wilkerson's Blog

Warning: Trying to access array offset on value of type null in /home/jwblogger/jwBlogger/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on value of type null in /home/jwblogger/jwBlogger/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

My last blog post presented a KnockoutJS component that toggled text into a form field. This code sample is ripped from a project I’ve been working on lately. To give context, this project is a small web application that allows administrators to edit details of a group of users.

Today I will show another component from that same project that will allow the administrator to assign items to a user using a dropdown.

Check out the Codepen

In this particular example, the items are baseball teams, and we are assigning “favorite teams” to the user. To assign a team to the user, the administrator selects the team from the dropdown list, then clicks a button to assign the team to the user. Once the administrator adds 5 teams, the dropdown is disabled, and a message is displayed to the user.

The list used to populate the dropdown is an array of objects. Each object presumably will have ID and Name attributes.

The View

Let’s first take a look at my view (my HTML) of this component:

<add-to-list params="list: $root.filteredItems(), optionsText: 'name', submit: addItem, disable: (selectedUser().List().length >= 5), limitMsg: 'Stop it! you have enough favorite teams.'">
</add-to-list>

The component is a custom html element called `add-to-list`. This element, like all KnockoutJS components, has a params attribute. I use this attribute to pass data from my ViewModel to my component. The data I’m passing is:

list: The list used to populate the dropdowns.
optionsText: This mimicks the optionsText binding of KnockoutJS, and tells the component which property of the object to display in the dropdown.*
submit: Function to add the item to the User’s list
disable: Boolean expression that tells component when to disable itself.
limitMsg: Text to display when component disables itself.

*Yes, I could implement a ‘optionsValue’ binding. However, for demonstration purposes, I’m going to assume the value of each item in the dropdown list will be the ID property of each item.

Filtering the Master List

In this example, I am giving the component a function that returns a list rather than the list itself. This is so I can take out any items that the user already selected. Here is the function for that.

/* function to filter the main data list depending on what the user has selected */
	self.filteredItems = function() {
		return ko.utils.arrayFilter(self.allDataList(), function(listItem) {
			var match = -1;
			ko.utils.arrayForEach(self.selectedUser().List(), function(item) {
				if(item.ID == listItem.ID)
					match = 1;
			
			});
			return match <= 0;
		});
	};

Below is the codepen that demonstrates the complete component. My next blog post will show the complete admin screen that will contain this component combined with the edit-inline component from a previous blog post.

See the Pen Add-to-list KnockoutJS component by Jeff Wilkerson (@stljeff1) on CodePen.0