Недавно я работал над компонентом sitecore enet, используя SXA, и у меня есть требование искать и сортировать события, используя данные JSON от контроллера. Проблема возникает, когда я статически добавляю данные json в тег скрипта, все работает нормально.
Stati c Данные
<script>
educationEvents = {
"records": [{
"rid": 1,
"Event Name": "3Shape Basic Training",
"Date": "01/17/2020",
"Description": "<p>This is Description<br /></p>",
"Organizers": "Zahn D",
"City": "Online",
"Event type": "Class",
"Date Stamp": "1579199400000",
"Register Link": ""
}, {
"rid": 2,
"Date": "6/14/2019",
"Date Stamp": Date.parse("6/14/2019"),
"Event Name": "The Versatility and Advantages",
"Description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem dolores dolorum error iure laudantium nemo neque, nisi quidem quod similique totam vel vitae? Animi aperiam at iste iusto molestiae odit omnis! Adipisci alias autem, consequatur culpa est eum impedit ipsum labore libero nulla odio quaerat, quo recusandae vitae voluptatum.",
"Organizers": "Migue",
"City": "",
"Event type": "Webinar",
"Register Link": ""
}, {
"rid": 3,
"Date": "7/16/2019",
"Date Stamp": Date.parse("7/16/2019"),
"Event Name": "Digital RPD Production and Zirconia Solutions: A to Z",
"Description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A autem dolores dolorum error iure laudantium nemo neque, nisi quidem quod similique totam vel vitae? Animi aperiam at iste iusto molestiae odit omnis! Adipisci alias autem, consequatur culpa est eum impedit ipsum labore libero nulla odio quaerat, quo recusandae vitae voluptatum.",
"Organizers": "Kris Schermerhorn, CDT and Pamela Hanneman CDT",
"City": "",
"Event type": "Webinar",
"Register Link": ""
}],
"headers": [
"-select",
"-rid",
"-Date",
"Event Name~Event",
"Date Stamp~Date",
"Description",
"Organizers",
"City",
"Event type",
"Register Link~Register"
],
"column-widths": [
"0", //"-select",
"0", //"-rid",
"0", //"Date",
"45", //"Event Name",
"20", //"Event Date",
"0", //Description
"0", //"Organizers",
"20", //"City",
"0", //"Event type"
"15" //Register Link
],
"table-width": 100,
"actions": [],
"selected": [],
"hidden": [],
"count": 5,
"page-size": 25,
"page": 1,
"sort-by": "Date Stamp~Date",
"filter-by": ""
};
</script>
Но когда я получить данные с помощью ajax вызовите их не выполняет операции поиска и сортировки с Ajax
function EventViewModel() {
var self = this;
self.EventsList = ko.observableArray([]);
var educationEvents = {};
self.GetEvents = function () {
$.ajax({
type: 'GET',
url: 'api/Sitecore/Events/GetEvents',
dataType: "json",
data: {
datasourceId: $(".hidden-datasource").val()
},
success: function (data) {
for (var i = 1; i <= Object.keys(data).length; i++) {
data[i - 1].rid = i.toString();
data[i - 1]["Event Name"] = data[i - 1].EventName;
data[i - 1]["Date"] = data[i - 1].EventStartDate;
data[i - 1]["Description"] = data[i - 1].EventDescription;
data[i - 1]["Organizers"] = data[i - 1].Presenter;
data[i - 1]["City"] = data[i - 1].Location;
data[i - 1]["Event type"] = data[i - 1].EventType;
data[i - 1]["Register Link"] = data[i - 1].LearnMoreLink;
data[i - 1]["Date Stamp"] = Date.parse(data[i - 1].EventStartDate.toString());
delete data[i - 1].EventName;
delete data[i - 1].EventStartDate;
delete data[i - 1].EventDescription;
delete data[i - 1].Location;
delete data[i - 1].EventType;
delete data[i - 1].Presenter;
}
educationEvents = {
"records": JSON.stringify(data)
},
console.log(educationEvents);
//Here you map and create a new instance of EventDetailVM
self.EventsList($.map(data, function (item) {
return new EventDetailViewModel(item);
}));
}
});
}
self.GetEvents();
}
function EventDetailViewModel(data) {
var self = this;
self.EventName = ko.observable(data.EventName);
self.Presenter = ko.observable(data.Presenter);
self.EventStartDate = ko.observable(data.EventStartDate);
self.EventEndDate = ko.observable(data.EventEndDate);
self.Location = ko.observable(data.Location);
self.LearnMoreLink = ko.observable(data.LearnMoreLink);
}
$(document).ready(function () {
ko.applyBindings(new EventViewModel());
});
образец Html
<section class="hs-tabular-data symphony-table small" data-source="educationEvents" data-templated="["Date-Stamp", "Event Name", "Register Link", "City"]" data-row-bound="tabularVMatch" data-current-page="1">
<div class="table-row table-heading-hr border-bottom">
<div data-header="-select" class=" first-table-cell strong pad col-0">
<input type="checkbox" class="rid-select-all" value="all">
</div>
<div data-header="-rid" class=" strong pad col-0">rid</div>
<div data-header="-Date" class=" strong pad col-0">Date</div>
<div data-header="Event Name" class=" strong pad col-45">Event</div>
<div data-header="Date Stamp" class=" strong pad col-20">Date</div>
<div data-header="Description" class=" strong pad col-0">Description</div>
<div data-header="Organizers" class=" strong pad col-0">Organizers</div>
<div data-header="City" class=" strong pad col-20">City</div>
<div data-header="Event type" class=" strong pad col-0">Event type</div>
<div data-header="Register Link" class=" strong pad col-15 last-table-cell ">Register</div>
</div>
<div class="table-body">
@{
if (Sitecore.Context.PageMode.IsExperienceEditor)
{
foreach (EventsModel item in Model.EventItems)
{
{
Html.RenderPartial("EventListEvent", item, new ViewDataDictionary
{
{ "cssClass", ListsHelper.BuildCssClass(index, Model.EventItems.Count()) },
{ "variantFields", Model.VariantFields }
});
}
index++;
}
}
else
{
foreach (EventsModel item in Model.EventItems)
{
var eventItem = item.InnterItem;
var eventItemDateField = (DateField)eventItem.Fields[EventDetailsTemplates.EventStartDateField];
var eventItemDate = Sitecore.DateUtil.IsoDateToDateTime(eventItemDateField.Value);
if (eventItemDate >= DateTime.Now && eventItemDate.Month == i)
{
{
Html.RenderPartial("EventListEvent", item, new ViewDataDictionary
{
{ "cssClass", ListsHelper.BuildCssClass(index, Model.EventItems.Count()) },
{ "variantFields", Model.VariantFields }
});
}
}
index++;
}
}
}
</div>
</section>
<div id="educationEvents-Templates" class="hidden">
<div id="educationEvents-Event-Name">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Event Detail</div>
<button class="medium x-bold event-info block ellipsis no-border no-background push-left">{{event-name}}</button>
<strong class="x-small color-label-gray field-label">Presented by: </strong><strong class="x-small">{{organizers}}</strong>
<div data-hs-match="{{event-type}} === Class">
<div class="hs-pill bg-color-highlighted-green margin-top">{{event-type}}</div>
</div>
<div data-hs-match="{{event-type}} === Webinar">
<div class="hs-pill bg-color-highlighted-blue margin-top">{{event-type}}</div>
</div>
</div>
<div id="educationEvents-City">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">City</div>
<div data-hs-match="{{event-type}} === Webinar"> <span class="color-lite-gray small">Online</span> </div>
<div data-hs-match="{{event-type}} === Class"> {{city}} </div>
</div>
<div id="educationEvents-Date-Stamp">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Date</div>
<span class="color-lite-gray small">{{date}}</span>
</div>
<div id="educationEvents-Register-Link">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Register</div>
<a><strong class="x-small">Register Now</strong></a>
</div>
</div>
Есть ли способ, которым я могу достичь этого.