So erstellen Sie separate Spalte Vorlage in Kendo-UI Raster

Question

Ich beginne, Kendo-UI in meinem Projekt zu verwenden, möchte ich eine meiner Spalte zeigen eine Bildschaltfläche und ein Feld, ähnlich mit 'Kontaktname' in der Dokumentation here .Dann Ich habe die Dokumentation überprüft und den Code wie folgt erhalten.

columns: [{ 
 
        template: "<div class='customer-photo'" + 
 
            "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" + 
 
           "<div class='customer-name'>#: ContactName #</div>", 
 
        field: "ContactName", 
 
        title: "Contact Name", 
 
        width: 240 
 
       }, { 
 
        field: "ContactTitle", 
 
        title: "Contact Title" 
 
       }, { 
 
        field: "CompanyName", 
 
        title: "Company Name" 
 
       }, { 
 
        field: "Country", 
 
        width: 150 
 
       }]

Ich glaube nicht, html in der Vorlage schreibt, ist direkt ein guter Weg, vor allem mit einer sehr komplexen Vorlage. Dann habe ich eine andere Lösung aus der Dokumentation gefunden.

"template": "kendo.template($('comments-template').html())" 

Dies ist sinnvoller in meinem Szenario. Aber ich bin sehr verwirrt, wo die Vorlage besser zu definieren ist. Ich benutze auch AngularJS. Soll ich eine neue Datei erstellen, um die Vorlage oder einen anderen Ort zu schreiben?

Dank

Answer 1

Die columns.template Eigenschaft erwartet einen String oder eine Funktion, die einen String zurückgibt. Sie können entweder einen <script> Tag im Markup HTML verwenden ...

<script id="script-template-id" type="text/x-kendo-template"> 
    <div class="myClass">#: FieldName #</div> 
</script> 

... 

<script> 
// ... 

columns: [{ 
    title: "My Template Column", 
    template: $('#script-template-id').html() 
}] 

// ... 
</script> 

... oder eine String-Variable verwenden, die definiert ist, wo auch immer Sie bevorzugen, einschließlich einer externen JavaScript-Datei (vorausgesetzt, dass es früh genug registriert werden für die Variable vorhanden sein):

var templateStringVariable = '<div class="myClass">#: FieldName #</div>'; 

// ... 

columns: [{ 
    title: "My Template Column", 
    template: templateStringVariable 
}] 

Beachten Sie, dass diese Syntax nicht funktionieren, da der JavaScript-Code selbst Zeichenfolge:

"template": "kendo.template($('comments-template').html())"