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

In a recent project, I was working with a listing of people, and clicking on one person displayed the details of that person to the right of the listing so that the user could edit the details of the selected person. Within the form, the client wanted to show thetext fields as clickable text – clicking the text would toggle the text into an input field. Blurring the input field would toggle the element back to text.

The page already had KnockoutJS and Bootstrap available, so I decided to leverage those tools. I ended up writing a custom component to solve the problem. Here is the codepen showing my solution.

See the Pen Edit-Inline with Knockout by Jeff Wilkerson (@stljeff1) on CodePen.0

Included in this example is a custom binding that saves the value ONLY IF the user hits the ‘Enter’ key. This binding is not mine; it was inspired by a StackOverflow post (maybe this one?) or maybe by Ryan Niemeyer .

Check out the full code on GitHub, or see the codepen.