divをjQueryではなくknockoutJSでリフレッシュできますか？

Question

div内の画像をクリックしたときに、jQueryではなくknockoutJSでdivをリフレッシュしたいとします。

は、例えば、私は、この画像をクリックすると、それはページ全体が、ページの一部だけを更新していないしたいと思います。

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

このようなビットは、jQueryのある

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

これは可能ですか？

Answer 1

html bindingはずっとtext結合バインドプレーンテキストのような変数にHTMLをバインドします。リフレッシュ操作は、新しいコンテンツをフェッチして変数に入れるだけです。

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

最も近いノックアウトは、リモートコンテンツをロードすることになるがcomponents with the require optionです。もちろん、いつでもcustom bindingを作成することができます。