javascript - 使用knockoutjs将url内容加载到div上

Question

我有以下 div 结构:

<div class = "maindiv" data-bind="foreach: $data[1]">   <a >
     <span id="Name" data-bind="text:$data.Url"></span>    </a> </div>

加载页面时是否可以显示“maindiv”中的 url 内容？

Onclick of span 我知道我可以使用 jQuery 的 $().html("url") 来加载内容，但是是否可以在加载时这样做一个页面？

Answer 1

你应该做两件事:

1. 创建一个包含来自该 URL 的数据的可观察对象。
2. 使用 html 绑定(bind)来绑定(bind)该 observable。

这是一个例子:

// Mock out jQuery ajax calls
var $ = {
  ajax: function(opts) {
    // ignore URL and so forth in this mock, just call success
    // simulate latency with setTimeout
    setTimeout(function() {
      opts.success("<strong>Your</strong> fancy <em>html</em> result from url: <code>" + opts.url + "</code>.");
    }, Math.random() * 1000 + 1000);
  }
}

function Item(i) {
  var self = this;
  self.url = "http://example.com/"+i+".html";
  self.urlContents = ko.observable("not loaded yet");
  $.ajax({
    url: self.url,
    success: function(html) { self.urlContents(html); }
  });
}

function ViewModel() {
  this.items = ko.observableArray([new Item("A123"), new Item("XYZ456789")]);
}

ko.applyBindings(new ViewModel());

.maindiv { padding: 10px; border: 1px solid blue; }
span { padding: 10px; display: inline-block; border: 1px solid red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<div class="maindiv" data-bind="foreach: items">   
  <a>
     <span data-bind="html: urlContents"></span>
  </a> 
</div>

PS。不要在 foreach 中使用 id 属性:它们在您的 html 文档中必须是唯一的，并且如果您要查找的列表中有多个项目，它们将不再是唯一的。