Knockoutjs Study notes (eight)

Source: Internet
Author: User

The with binding is used to create a new binding environment (binding context), and all child elements of the element containing the with binding will be within the context of the specified object.

The following is a simple example of using with binding:

JS section:

1 var viewModel = {2     key: ' Name ',3person    : {4         firstName: "Kazusa",5         lastName: "Touma"6    }7 }; 8 9 ko.applybindings (ViewModel);

HTML section:

1 <H3Data-bind= "Text:key"></H3>2 <PData-bind= "With:person">3First Name:<spanData-bind= "Text:firstname"></span><BR/>4Last Name:<spanData-bind= "Text:lastname"></span>5 </P>

The page looks as follows:

In the above example, notice that the data-bind within the child elements of the P element are directly bound to FirstName and LastName without having to prefix the person before, which is precisely because we have used the with binding in p to bind the binding The context changed to person.

The following is a more complex example:

HTML section:

1 <formData-bind= "Submit:gettweets">2 Twitter Account:3     <inputData-bind= "Value:twittername" />4     <Buttontype= "Submit">Get Tweets</Button>5 </form>6 7 <DivData-bind= "With:resultdata">8     <H3>Recent tweets fetched at<spanData-bind= "Text:retrievaldate"></span></H3>9     <olData-bind= "Foreach:toptweets">Ten         <LiData-bind= "Text:text"></Li> One     </ol> A  -     <ButtonData-bind= "click: $parent. Clearresults">Clear Tweets</Button> - </Div>

JS section:

1 functionMyviewmodel () {2     varSelf = This;3Self.twittername = ko.observable ("@Kazusa");4Self.resultdata =ko.observable ();5 6Self.gettweets =function() {7         varName =self.twittername ();8         varSimulatedresults = [9{text:name + ": What a nice day." },Ten{text:name + ": Building some cool apps." }, One{text:name + ": Just saw a famous celebrity eating lard. Yum. " } A         ]; -          - Self.resultdata ({ theRetrievaldate:NewDate (), - Toptweets:simulatedresults -         }); -     }; +  -Self.clearresults =function() { + self.resultdata (undefined); A     } at } -  -Ko.applybindings (NewMyviewmodel ());

From this example, we can see several features of the with binding when used. When the binding context to which the with binding binds is null or undefined, all child elements of the element containing the with binding are removed from the UI page. If we need to get data or function from the parent binding context, we can use special context properties such as $parent or root, which can refer to the binding Context

If the bound binding context is a observable, the element containing the with binding removes the existing descendant elements as the observable changes and adds a series of descendant elements that are subordinate to the new binding context.

Similarly, the with binding also provides container-free control-flow syntax, where examples are omitted and can be referred to if binding.

Knockoutjs Study notes (eight)

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.