Beginner Knockoutjs Record 9--bindings bindings (1 controling text and appearance control of texts and skins)

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.