Question

我想在div中单击图像时使用knockoutJS而不是jQuery刷新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

最接近的Knockout来加载远程内容是components with the require option。当然，您始终可以创建custom binding。

Answer 2

html binding将在变量中绑定HTML，就像text绑定绑定纯文本一样。刷新操作只需要获取新内容并将其放入变量中。

＆＃13;

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);

＆＃13;

.changeable {
  background-color: #eef;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: