1 the "visible" binding
Purpose Use
The visible binding is used to trigger the associated DOM element to be hidden or visible based on the value that you pass in the binding.
Example
<div data-bind= "Visible:shouldshowmessage" > you'll see ThisMessage only when "Shouldshowmessage" holds atruevalue.</div><script type= "Text/javascript" >varViewModel ={shouldShowMessage:ko.observable (true)//Message initially visible }; Viewmodel.shouldshowmessage (false);//... now it ' s hiddenViewmodel.shouldshowmessage (true);//... now it ' s visible again</script>
Parameters Parameters
Main parameter parameters
when the parameter is set to a value similar to False (such as false for a Boolean type, or the number 0, or null, or undefined), the binding sets the display style of the related element to "none" (yourelement.style.display= "None"), which hides it, which takes precedence over any CSS style you define ;
When the parameter is set to a value similar to True (such as true for a Boolean type, or when a non-empty object or array), the binding removes the display style of the related element, which removes the value set to YourElement.style.display , which triggers its display Note that any CSS display style you configure applies to the rule (for example, like X{display:table-row}, which works well with the binding)
If the parameter is a monitoring property value, the binding updates the Visible property of the element at any time when the value of the monitor property changes, and if the parameter is not a monitoring property, it only sets the Visible property of the element once, and then does not update the element as the value changes .
Additional Parameters Additional Parameters
No
note:using functions and expressions to control element visibility Note: Controlling elements with functions or expressions is visible
You can use JavaScript functions or arbitrary javascript expressions as parameter values, and if you do, KO executes a function or evaluates an expression and uses the resulting value to decide whether to hide the related element.
For Examle,
<div data-bind= "visible:myvalues (). length > 0" > This message is only when ' myvalues ' Have at least one member. </div><script type= "Text/javascript" > var viewModel = { // Initially empty, so message hidden }; ViewModel.myValues.push (// now visible</script>
Dependencies Dependency
In addition to the knockout library does not rely on other
Beginner Knockoutjs Record 9--bindings bindings (1 controling text and appearance control of texts and skins)