Skip to content
Sheng Zhao edited this page Jul 13, 2015 · 8 revisions

Access Point is the description of where you want to bind to the target, it depends on the target.

  • Left Access Point is on the object selected by "Selector". In most case, the selected object is a HTML element and left Access Point can be any properties on that object.
  • Right Access Point is on the current Data Context.
  • Both left or right Access Point can use Target Modifier to select a different target.

At current stage, when you bind to a HTML element, you can use these Access Points:

  1. Any properties that comes with DOM element such as "value", "selectedIndex", "disabled", "style.backgroundColor"... Please note when you use the original properties on DOM element, you need to deal with browser compatibility by your-self. You'll find if you bind to the "innerText" of a "span", it wouldn't work in FireFox.
    Please note that not all of the HTML Access Pointers are observable. Here is the list for the observable Access Points on HTML element: https://github.com/alexzhaosheng/knot.js/wiki/Observable-HTML-Access-Points

  2. Knot.js comes with some special Access Points that provide cross browser ability as well as the convenient ways to deal with the most common problems. Here's what we have now (it's increasing):

  • text: The text content of a HTML element. it applies to "text" for "option" of "select" and "textContent" for the other elements.

  • class: Add/remove a class from the HTML element. Add prefix "+" to add the class(if class is not added), and "-" to remove the class. ex:"+selected -highlited" will add "selected" class while remove the "-highlited" class.

  • options: Only for "select" element. Bind an array to "options" to set the items in the array as the option items of the select, it comes with an Access Point Option "displayMember" which allow you specify which property on the array item is to be set as the text of the option. ex:options[displayMember:name]: users this will use "users" array to create the options of the select and use the "name" property on the user object as the text of the option.

  • selectedData: Only for "select" element. Only works with the options that created with "options" Access Point or by "foreach" binding. It set the selected option by the Data Context of the option and return the Data Context of the selected option.

Clone this wiki locally