Onload url Inhalt auf einen div knockoutjs

Question

Ich habe folgende div Struktur mit:

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

Auf Last der Seite ist es möglich, den Inhalt der URL in den „maindiv“ zu zeigen?

Onclick von span Ich bin mir bewusst, ich könnte jQuery $().html("url") verwenden, um Inhalte zu laden, aber ist es möglich, dies beim Laden einer Seite zu tun?

Answer 1

Sie sollten zwei Dinge tun:

1. Eine beobachtbar, die die Daten von dieser URL enthält.
2. Bindung, die mit html Bindung beobachtbar ist.

Hier ist ein Beispiel:

// 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. Verwenden Sie keine id Attribute in einem foreach: Sie müssen in Ihrem HTML-Dokument eindeutig sein und werden nicht eindeutig sein, wenn mehrere Elemente in der Liste sind, über die Sie vorlesen.