Jason
Using foreach without a containerelementThe <!-- ko --> and <!-- /ko --> comments act as start/end markers, defining a “vi...
Examplevar viewModel = {    tr:[       {text:"text1", value:"value1"},       {text:"text2", value:"value2"},       {text:"...
ExampleOutput :<table>     <!-- ko foreach: tr -->      <tbody>    <tr>   <td data-bind="text:text"></td>   <td data-bind=...
Example<table><tbody><!-- ko foreach: tr --><tr><td data-bind="text:text"></td><td data-bind="text:value"></td></tr><!-- /...
The "event" binding<div><div data-bind="event: {mouseover: enableDetails,mouseout: disableDetails }">Mouse over me</div><d...
The "event" binding<ul data-bind="foreach: places"><li data-bind="text: $data, event:{ mouseover: $parent.logMouseOver }">...
The "event" bindingAccessing the event object, or passing more parameters<div data-bind="event:{ mouseover: myFunction }">...
The "event" bindingAccessing the event object, or passing more parameters<div data-bind="event:{ mouseover:function(data, ...
The "event" bindingAccessing the event object, or passing more parameters<button data-bind="event:{ mouseover:myFunction.b...
The "event" bindingAllowing the default action<a href="http://XXXX.html" data-bind="event:{ click: myFunction }">Click me<...
The "event" bindingPreventing the event from bubbling<div data-bind="event: { mouseover: myDivHandler }">    <button data-...
Converting View Model Data to Plain JSONfunction MyViewModel() {var self = this;self.firstName = ko.observable("Bert");sel...
Converting View Model Data to Plain JSON ko.toJSvar plainJs = ko.toJS(vm); ko.toJSONvar jsonData = ko.toJS(vm);plainJs...
Reference Introduction Knockoutjshttp://knockoutjs.com/documentation/introduction.html
Upcoming SlideShare
Loading in …5
×

Knockout_jason_2013_05_24

228 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
228
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • var viewModel = { myDivHandler: function(data, event) { console.log(&quot;myDivHandler&quot;); }, myButtonHandler :function(data){ console.log(&quot;myButtonHandler&quot;); }};
  • Knockout_jason_2013_05_24

    1. 1. Jason
    2. 2. Using foreach without a containerelementThe <!-- ko --> and <!-- /ko --> comments act as start/end markers, defining a “virtual element” that contains the markup inside<ul>    <li class="header">Header item</li>    <!-- ko foreach: myItems -->        <li>Item <span data-bind="text: $data"></span></li>    <!-- /ko --></ul>
    3. 3. Examplevar viewModel = {    tr:[       {text:"text1", value:"value1"},       {text:"text2", value:"value2"},       {text:"text3", value:"value3"}      ]};  <table>     <!-- ko foreach: tr -->      <tr>        <td data-bind="text:text"></td>        <td data-bind="text:value"></td>      </tr>     <!-- /ko -->  </table>Uncaught Error: Cannot find closing comment tag to match: ko foreach: tr 
    4. 4. ExampleOutput :<table>     <!-- ko foreach: tr -->      <tbody>    <tr>   <td data-bind="text:text"></td>   <td data-bind="text:value"></td>        </tr>     <!-- /ko -->  </tbody></table>
    5. 5. Example<table><tbody><!-- ko foreach: tr --><tr><td data-bind="text:text"></td><td data-bind="text:value"></td></tr><!-- /ko --></tbody></table><table><tbody data-bind=“foreach: tr”><tr><td data-bind="text:text"></td><td data-bind="text:value"></td></tr></tbody></table>
    6. 6. The "event" binding<div><div data-bind="event: {mouseover: enableDetails,mouseout: disableDetails }">Mouse over me</div><div data-bind="visible: detailsEnabled">Details</div></div>
    7. 7. The "event" binding<ul data-bind="foreach: places"><li data-bind="text: $data, event:{ mouseover: $parent.logMouseOver }"></li></ul>function MyViewModel() {var self = this;self.places = ko.observableArray([London,Paris, Tokyo]);self.logMouseOver = function(place) {console.log(place);}}
    8. 8. The "event" bindingAccessing the event object, or passing more parameters<div data-bind="event:{ mouseover: myFunction }">Mouse over me</div>var viewModel = {myFunction: function(data, event){……}};
    9. 9. The "event" bindingAccessing the event object, or passing more parameters<div data-bind="event:{ mouseover:function(data, event) {myFunction(param1, param2, data, event)}}">    Mouse over me</div>
    10. 10. The "event" bindingAccessing the event object, or passing more parameters<button data-bind="event:{ mouseover:myFunction.bind($data, param1, param2)}">    Click me</button>
    11. 11. The "event" bindingAllowing the default action<a href="http://XXXX.html" data-bind="event:{ click: myFunction }">Click me</a>var viewModel = {myFunction: function(data, event) {console.log(data);return false;}};
    12. 12. The "event" bindingPreventing the event from bubbling<div data-bind="event: { mouseover: myDivHandler }">    <button data-bind="event:{ mouseover: myButtonHandler },mouseoverBubble: false">        Click me    </button></div>
    13. 13. Converting View Model Data to Plain JSONfunction MyViewModel() {var self = this;self.firstName = ko.observable("Bert");self.lastName = ko.observable("Bertington");self.fullName = ko.computed(function(){ return self.firstName() + “, “ +self.lastName();});}var vm = new MyViewModel();alert(JSON.stringify(vm));
    14. 14. Converting View Model Data to Plain JSON ko.toJSvar plainJs = ko.toJS(vm); ko.toJSONvar jsonData = ko.toJS(vm);plainJs = {firstName: "Bert",lastName: "Bertington",fullName: "Bert, Bertington"}jsonData = ‘{"firstName":"Bert","lastName":"Bertington","fullName":"Bert, Bertington"}’;
    15. 15. Reference Introduction Knockoutjshttp://knockoutjs.com/documentation/introduction.html

    ×