我可以使用knockoutJS而不是jQuery来刷新div吗？

Question

我想用knockoutJS而不是jQuery来刷新div，当在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将在变量中绑定HTML，就像text绑定绑定纯文本一样。刷新操作只是提取新内容并将其放入变量中。

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

最接近加载远程内容的Knockout是components with the require option。当然，你可以随时创建一个custom binding。