Question

我有以下div结构：

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

在加载页面时，可以在＆＃34; maindiv＆＃34;？

中显示网址的内容

点击span我知道我可以使用jQuery＆＃39; $().html("url")来加载内容，但是可以在加载页面时这样做吗？

Answer 1

你应该做两件事：

创建一个包含该网址数据的observable。
用html绑定绑定该可观察对象。

以下是一个例子：

// 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。不要在id中使用foreach属性：它们在您的html文档中必须是唯一的，并且如果您正在预告的列表中有多个项目，则不会是唯一的。

使用knockoutjs将url内容上载到div

1 个答案: