List of favorite projects via MVVM paradigm

index.html

Project name: 
<input data-bind="value: name, valueUpdate: 'afterkeydown'"
  placeholder="Your own?">
</input> 
<!-- when pressed, call the "addName" method -->
<button data-bind="click: addName, enable: canAdd">Add!</button>
 
<h3>Favorite Projects</h3>
 
<!-- iterate through the array of names and display them -->
<ul data-bind="foreach: names">
  <li>
    <span data-bind="text: $data"></span> -
    <a href="#" data-bind="click: $root.removeName">
      Not mine!
    </a>
  </li>
</ul>

ProjectsDemo.java

package dew.demo.favorite;
 
import net.java.html.json.*;

/** Generates class Projects with getter and setter for
* string property "name" and another for an array/a list 
* of strings.
*/
@Model(className="Projects", properties={
  @Property(name="name",type=String.class),
  @Property(name="names",type=String.class, array = true)
})
class ProjectsDemo {
  /** Derived property based on value of property "name" */
  @ComputedProperty static boolean canAdd(String name) {
    return name != null && !name.isEmpty();
  }
  
  // callback functions called from the HTML by knockout4java
  
  @Function static void addName(Projects model) {
    model.getNames().add(model.getName());
    model.setName("");
  }
  
  @Function static void removeName(
    Projects model, String data
  ) {
    model.getNames().remove(data);
  }
  
  // initialization of the model
  static {
    Projects m = new Projects("", 
      "NetBeans", "Bck2Brwsr", "DEW", "Knockout4Java"
    );
    m.applyBindings();
  }
}

See the live snippet by visiting its DEW at http://dew.apidesign.org/dew/#7086050