Kann ich ein div mit knockoutJS anstelle von jQuery aktualisieren?

Question

Ich möchte ein div mit knockoutJS anstelle von jQuery aktualisieren, wenn ein Bild im div geklickt wird.

zum Beispiel möchte ich auf dieses Bild klicken und nicht die gesamte Seite aktualisieren, sondern nur einen Teil der Seite.

<img src="/images/xOut.png" id="cancelAction" data-bind="click: function(){isFreshIdea(!isFreshIdea());" style="cursor:pointer;position: absolute;" /> 

ein bisschen wie das ist jQuery

$(function() { 
    $(“#cancelAction”).click(function() { 
    $(“#freshDiv”).load(Page.html + '#freshDiv') 
    }) 
}) 

Ist das möglich?

Answer 1

Die html binding wird HTML in einer Variablen binden, ähnlich der text Bindung bindet Klartext. Die Aktualisierungsoperation besteht nur darin, den neuen Inhalt zu holen und ihn in die Variable einzufügen.

vm = { 
 
    refreshHtml: function() { 
 
    /* You might do something like: 
 
     $.get("http://www.mypage.com", vm.sectionContent, 'html'); 
 
     I'm simulating a fetch with this: 
 
    */ 
 
    setTimeout(function() { 
 
     vm.sectionContent('<h3>Something else</h3><div>Content has been swapped</div>'); 
 
    }, 500); 
 
    }, 
 
    sectionContent: ko.observable('<h2>Change this</h2>') 
 
}; 
 

 
ko.applyBindings(vm);

.changeable { 
 
    background-color: #eef; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=click+me&w=150&h=150&txttrack=0" data-bind="click: refreshHtml" /> 
 
<div>Some stuff</div> 
 
<div class="changeable" data-bind="html:sectionContent"></div> 
 
<div>Some more stuff</div>

Answer 2

Der nächste Knockout kommt zum Laden von Remote-Inhalt ist components with the require option. Natürlich können Sie immer eine custom binding erstellen.