JS-Funktion automatisch aufrufen, wenn Textfeld geladen wird

Question

Ich habe Razor-Seite, wo ich Wochentag mit Übersetzungen in Indextabelle anzeigen möchte. Ich möchte, dass diese Berechnung auf Client-Seite mit einfacher JS-Funktion durchgeführt und angezeigt wird.

Seite:

@foreach (var item in Model.Trainings) { 
    <tr> 
     <td> 
      <p call_function?='getWeekday(@item.Since)'></p> <!-- I want weekday to be displayed here --> 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Since) 
     </td> 
    </tr> 
} 

JS Funktion:

<script> 
     function getWeekday(date) { 
      var weekdays = ({ 
       et: ["Pühapäev", "Esmaspäev", "Teisipäev", "Kolmapäev", "Neljapäev", "Reede", "Laupäev"], 
       en: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] 
      }); 

      var d = new Date(date); 
      var n = weekdays['et'][d.getDay()]; // currentCultureCode 
      return n; 
     } 
</script> 

Gibt es Namen oder Ausdruck, wie diese Art von Verfahren benannt ist?

Answer 1

Beim Erstellen des Elements im DOM wird kein Ereignis auf Elementebene ausgelöst.

Stattdessen können Sie Ihren HTML-Code erstellen und dann eine Funktion ausführen, wenn das DOM geladen wurde. Sie können auch das Datum aus dem item.Since Eigenschaft in einem data auf das Element Attribut kommt speichern den Code erweiterbar, so etwas zu machen:

function getWeekday(date) { 
 
    var weekdays = ({ 
 
    et: ["Pühapäev", "Esmaspäev", "Teisipäev", "Kolmapäev", "Neljapäev", "Reede", "Laupäev"], 
 
    en: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] 
 
    }); 
 

 
    var d = new Date(date); 
 
    var n = weekdays['et'][d.getDay()]; // currentCultureCode 
 
    return n; 
 
} 
 

 
[].forEach.call(document.querySelectorAll('table p'), function(p) { 
 
    var date = new Date(p.dataset.since); 
 
    p.textContent = getWeekday(date); 
 
});

<table> 
 
    <tr> 
 
    <td><p data-since="2017-11-28"></p></td> 
 
    <td>2017-11-28</td> 
 
    </tr> 
 
    <tr> 
 
    <td><p data-since="2017-11-29"></p></td> 
 
    <td>2017-11-29</td> 
 
    </tr> 
 
</table>

Oder in jQuery:

jQuery(function($) { 
    $('table p').text(function() { 
    var date = new Date($(this).data('since')); 
    return getWeekday(date); 
    }); 
});