Question

好吧，所以我只使用Jquery处理一些遗留代码而且我很难过。

从我收集的内容开始，我们从newView = new DOMObj（）开始。其中vm.products被初始化。

下一步是数据调用，它有一个for worker，它遍历JSON并在vm.products中分配它的对象。

下一个调用是updateItemHTML，它执行另一次迭代并使用值填充模板（我不相信人们必须在当天回复）

最后，我们调用的最后一个函数是updateWindow，它应该创建一个大的html模板并将其附加到正文中。

我遇到的问题是vm.items []。htmlView由于某种原因未定义。我无法判断它是否是一个Jquery的东西，或者我是否错过了一个关键的步骤但是我们对此感到非常感激。

它必须位于itemObj（）或vm.updateDOM（）

中的某个位置

 function DOMObj(){
    var vm = this;

    vm.items = [];

    vm.getItems = function(url) {

        $.getJSON(url, function(response) {
            for(var i = 0; i < response.sales.length; i++){

                vm.items.push(new itemObj(response.sales[i], i));

            }
        });

    };

    vm.updateItemHTML = function(){
        for( var i = 0; i < vm.items.length; i++){

            vm.items[i].updateHTML();

        }

    };

    vm.updateWindow = function() {

        var thisHTML = '';

        for( var i = 0; i < vm.items.length; i++){

            if (i % 3 === 0 ) {
                thisHTML += "<div class='row'>";
            }

            thisHTML += vm.items[i].htmlView;

            if ((i % 3 === 2) || i === (vm.items.length - 1) ){
                thisHTML += "</div>";
            }
        }
        $("#content").append(thisHTML);
    }
}

function itemObj(item, i) {
    var vm = this;

    vm.picture = item.photo;
    vm.title = item.name;
    vm.tagline = item.tagline;
    vm.url = item.url;

    vm.htmlView = "";
    vm.index = i;

    vm.class = "col" + ( (i % 3) + 1);

    vm.updateHTML = function() {
        $.get('item-template.html', function(template){
            vm.htmlView = template.replace('{image}', vm.photo)
                .replace('{string1}', vm.title)
                .replace('{string2}', vm.tagline)
                .replace('{URL}', vm.url)
                .replace('{class}', vm.class);
        });
    };
}
var newView = new DOMObj();


        newView.getItems('data.json');


            newView.updateItemHTML();
            newView.updateWindow();

我已经削减了一些（省略了一些不必要的事情）因为我总是偏执，所以如果变量拼写错误或者它可能不是问题但是我很感激也指出了这些。

*请记住，最后4个函数在此实例中不起作用，但假设dataCall在itemUpdates和DOM更新之前执行

我所知道的是，我非常感谢框架为我做了什么。

- 更新 -

啊我想最终省略一些代码将是一个问题

// execute promise chain

mainPromise()
    .then(getData);

//the timeout is a little hack to ensure the sequence is correct
mainPromise()
    .then(() => {
        setTimeout(() => {
            newView.updateItemHTML();
        }, 0);

        setTimeout(() => {
            newView.updateWindow();
        }, 0);
    });

添加了省略的代码

Answer 1

vm.getItems执行异步的http请求。

立即调用newView.updateItemHTML而不等待回调处理程序被执行。

一旦http请求完成，您需要传入一个回调函数来执行。

vm.getItems = function(url, callback)

并将其命名为

$.getJSON(url, function(response) {
    for(var i = 0; i < response.sales.length; i++){

        vm.items.push(new itemObj(response.sales[i], i));

    }
    if (callback) {
        callback();
    }
});

并将其传递给

newView.getItems('data.json', function() {
    newView.updateItemHTML();
    newView.updateWindow();
});

全局变量对象键未按定义显示

1 个答案: