Встраивание кода страницы SharePoint Online 2013 и Javascript — выходные данные исчезают

Question

Я заметил, что не могу встроить встроенный JavaScript в страницу веб-части SPO 2013, но могу ссылаться на библиотеку.

Я вывожу таблицу из этого js.Если я ставлю оповещения, таблица отображается, но затем исчезает после выполнения кода.

Есть ли способ сделать это без jsrender?

Подозреваю, что таблица должна находиться во встроенном коде разметки.

Это функция в библиотеке jquery, на которую я ссылаюсь в SiteAssets.

      $.ajax({
                url: 'https://xxxx/SearchValues/' ,
                data: 'SearchData=' + searchData,
                type: 'GET',
                dataType: 'json',
              //  jsonp: 'jsonp-callback',
                success: function (data) {
           //       alert("before write response");
                    WriteResponses(data);
                },
                error: function (x, y, z) {
                    alert(x + '\n' + y + '\n' + z);
                }
            }); 



            //Display results  in a table
            function WriteResponses(SitesList) {
                var strResult = "<table border='1px'><th width='20px'>ID</th><th width='100px'>TITLE</th><th 

width='100px'>FARM</th><th width='250px'>URL</th><th width='100px'>OWNERS</th><th width='200px'>ADMINISTRATORS</th>";
                $.each(SitesList, function (index, oSite) {
                    strResult += "<tr><td>" + oSite.LS_ID + "</td><td> " + oSite.LS_TITLE + "</td><td>" + oSite.LS_FARM + 

"</td><td>" + oSite.LS_SITE_URL + "</td><td>" + oSite.LS_OWNERS + "</td><td>" + oSite.LS_ADMINISTRATORS + "</td></tr>";
                });
                strResult += "</table>";
                $("#divResult").html(strResult);
alert(strResult);
            }

        }


    function WriteResponses(SitesList) {
        var strResult = "<table border='1px'><th width='20px'>ID</th><th width='100px'>TITLE</th><th width='100px'>FARM</th><th 

        width='250px'>URL</th><th width='100px'>OWNERS</th><th width='200px'>ADMINISTRATORS</th>";
        $.each(SitesList, function (index, oSite) {
        strResult += "<tr><td>" + oSite.LS_ID + "</td><td> " + oSite.LS_TITLE + "</td><td>" + oSite.LS_FARM + "</td><td>" + 

        oSite.LS_SITE_URL + "</td><td>" + oSite.LS_OWNERS + "</td><td>" + oSite.LS_ADMINISTRATORS + "</td></tr>";
        });
        strResult += "</table>";
        $("#divResult").html(strResult);
         }

Answer 1

Один из способов добиться того же результата — использовать Knockout.js.

Вы можете использовать Knockout.js и заполнить данные с помощью foreach цикл в наблюдаемом массиве.А в веб-части вам необходимо сопоставить элемент данных выбивания.

Это хорошо, потому что вы будете использовать объектно-ориентированный JavaScript и MVVM.И кода будет немного меньше.Пожалуйста, проверьте следующий код:

JavaScript:

var my = my || {}; //my namespace
my.ListItem = function () {
    this.LS_ID = ko.observable();
    this.LS_TITLE = ko.observable();
    this.LS_FARM = ko.observable();
    this.LS_SITE_URL = ko.observable();
    this.LS_OWNERS = ko.observable();
    this.LS_ADMINISTRATORS = ko.observable();
};
//My View Model
my.vm = function () {
    var
    Listdata = ko.observableArray([]),
    PopulateListdata = function(SitesList){
        $.each(SitesList, function (index, oSite) {
            Listdata.push(new my.ListItem()

            .LS_ID(oSite.LS_ID)

            .LS_TITLE(oSite.LS_TITLE)

            .LS_FARM(oSite.LS_FARM)

            .LS_SITE_URL(oSite.LS_SITE_URL)

            .LS_OWNERS(oSite.LS_OWNERS)

            .LS_ADMINISTRATORS(oSite.LS_ADMINISTRATORS)
            }
        };           
    return {
        Listdata: Listdata,
        PopulateListdata: PopulateListdata
    };
}();
my.vm.PopulateListdata(SitesList);
ko.applyBindings(my.vm);

HTML:

<script src='http://knockoutjs.com/downloads/knockout-3.1.0.js" type="text/javascript"></script> 
<div id='divResult'> 
<table border='1px'>
    <th width='20px'>ID</th> 
    <th width='100px'>TITLE</th> 
    <th width='100px'>FARM</th> 
    <th width='250px'>URL</th> 
    <th width='100px'>OWNERS</th> 
    <th width='200px'>ADMINISTRATORS</th> 
    <tbody data-bind='foreach: Listdata'> 
        <tr> 
            <td data-bind='text: LS_ID'></td>
            <td data-bind='text: LS_TITLE'></td> 
            <td data-bind='text: LS_FARM'></td> 
            <td data-bind='text: LS_SITE_URL'></td> 
            <td data-bind='text: LS_OWNERS'></td> 
            <td data-bind='text: LS_ADMINISTRATORS'></td> 
        </tr>
    </tbody> 
</table>
</div>

Я забыл прикрепить ссылку на нокаут.Я обновил его.Пожалуйста, проверьте.