Knockoutjs Study notes (eight)

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)