Question

提前感谢您的帮助。我花了几周的时间在网上搜索一些洞察力。我已经开发了超过50年的代码，但我是一个相当新的JavaScript，HTML，淘汰赛。从我看到的情况来看，如果我能弄清楚如何使其发挥作用，这将是很好的。下面给出的例子只是我尝试过的很多事情之一。请指教。

我在视图模型中定义了两个变量作为observable，一个是计算的observable，另一个是observableArray。在document.ready函数中，我进行了一个Ajax调用，它以对象表示法返回一个json。（我在调试器中检查过它）。当我的HTML页面显示observables和计算的observables正确显示时。该 observable数组生成错误（见下文），然后显示从Ajax返回的第一行获得的数据。（两人被退回）。

如何调整代码以便Ajax数据中的所有行都显示在显示的HTML中？

以下是我收到的错误消息：

未捕获的ReferenceError：无法处理绑定“foreach：function（）{return cartItems}” 消息：无法处理绑定“text：function（）{return itemSubTotal（）}” 消息：未定义itemSubTotal（19：41：39：172 |错误，javascript）

以下是我的视图模型的全局数据： var cartDB =“”; var totalPrice =“100”; var cartItems = new Array;

以下是视图模型：

  var ViewModel =function (){
        // direct items ==
            this.cartDB = ko.observable(cartDB);
        // array itesm
          //  this.cartItems = ko.observableArray(cartItems);
            this.cartItems = ko.mapping.fromJS(cartItems);
            //for (var n = 1;n++;n<cartItems.length){ this.cartItems.push(cartItem[n]);}
        // computed items
            this.totalPriceSv = ko.computed(function(){
                return "Total Price*=" + centsToDollars(totalPrice);// todo fix
                } ,this);//end totalSvPrice

    };// end ViewModel

数据来自以下调用Ajax的例程。该例程从document.ready中调用一次，并获得成功回调的预期数据。

function databaseCart(commandInput, cartDBInput, cartPidInput,logPhpInput) {
var postData = new Array();
postData[0] = commandInput;
postData[1] = cartDBInput;
postData[2] = cartPidInput;
postData[3] = logPhpInput; //debug log on php side
data = null; //for  return values
$.ajax({
    type: "GET",
    url: 'ww_CartProcess.php', //the script to call to get data
    data: {data: postData}, 
    dataType: 'json',
    success: function(data) {
         cartItems = data;
         debug = 0;
        },
    complete: function(data) {
         ko.applyBindings(new ViewModel);
         return TRUE;
        },
    error: function(x, e) {//this is the error function for ajax
        var xErr = x;
        var eErr = e;
        ajaxErrorProcessing(xErr, eErr, "addToCart", postData);
    }
});
}// end databasecart

以下是HTML 5代码段。

<div>
<h1 id="cartTitle">Cart Number: <span data-bind="text: cartDB"> </h1>

   <div class ="boxCartItem" data-bind="foreach:cartItems" >

<div class ="boxItemTitle">
    <h2 data-bind="text: title()"></h2>

</div><!--boxItemTitle-->

  <div class ="cartItemBottom"></div>   
  </div ><!--class ="boxCartItem"-->

Answer 1

我感谢评论者。我仍然不知道如何将元素添加到可观察数组中的所有项目行，但是这个问题是由于未定义项目列表引起的。线索＆GT;当出现多个错误时，从下到上工作有时（也许总是）很好。

问题可以更好地说明：给定2 x 17阵列（2行和17列独立变量）创建一个observableArray，其中包含2行和17个由17个独立变量组成的列（只能在数据库或有限的用户输入）增加了大量的计算函数 1.0我创建了一个orderModel，其中包含每个因变量的ko.computed（functions（）。

function rowOrder(data) {
    var self = this;
    var model = ko.mapping.fromJS(data, {}, self);
    model.imagePathSv = ko.computed(function() {
        var category = self.category();
        var imageName = self.imageName();
        var sv ="";
        var sv = "products\\" +category+"\\" + imageName;
        return sv;
        });//end  model.imagePathSv
    //original offer
    model.origNumValidate = ko.computed(function() {
        ans = self.origNum();
        if (ans < 0 | ans > 1) {
            alert("\
         Only onw Original can be pruchased");
            ans = 1;
        }
        self.origNum(ans);
        return ans;
        });//originalNumValidate
    model.origNumLabel = ko.computed(function() {
        var sv = "Original..." + centsToDollars(self.origCost());
        return sv;
        });//end  model.origNumLabel
    model.origMattedShow = ko.computed(function() {
        if (self.origMattedCost() > 0) {
            return true;
        }
        else {
            return false;
        }
    });
    model.origMattedLabel = ko.computed(function() {
        var sv = "Matting...." + centsToDollars(self.origMattedCost());
        return sv;
    });
    model.origFramedShow = ko.computed(function() {
        if (self.origFramedCost() > 0) {
            return true;
        }
        else {
            return false;
        }
    });

    model.origFramedLabel = ko.computed(function() {
        var sv = "Framing...." + centsToDollars(self.origFramedCost());
        return sv;
    });
    //reproductons  offer
    model.reproNumValidate = ko.computed(function() {
        ans = self.reproNum();

        self.reproNum(ans);
        return ans;
    });

    model.reproNumLabel = ko.computed(function() {
        var sv = "Reproductions." + centsToDollars(self.reproCost()) + " each";
        return sv;
    });//end  model.reproNumLabel
    model.reproMattedShow = ko.computed(function() {
        if (self.reproMattedCost() > 0) {
            return true;
        }
        else {
            return false;
        }
    });
    model.reproMatted = ko.observable(true);
    model.reproMattedLabel = ko.computed(function() {
        var sv ="Matting...." +centsToDollars(self.reproMattedCost());
        return sv;
        });
     model.reproFramedShow = ko.computed(function(){
          if(self.reproFramedCost()>0){return true;}
          else {return false;}
      });
    model.reproFramed = ko.observable(true);
    model.reproFramedLabel = ko.computed(function() {
        var sv ="Framing...." +centsToDollars(self.reproFramedCost());
        return sv;
        });
    //pricing subTotals
    model.productsSubTotal = ko.computed(function() {
        var ans =self.origNum() * self.origCost() + self.reproNum() * self.reproCost();
        return ans;
        });//end  model.productsSubTotal
    model.productsSubTotalSv = ko.computed(function() {
        return "Products.." +centsToDollars(model.productsSubTotal());
        return ans;
        });//end  model.productsSubTotal
    model.mattingSubTotal = ko.computed(function() {
        return self.origNum() * self.origMattedCost() + self.reproNum() * self.reproMattedCost();
        });//end  model.mattingSubTotal
        model.mattingSubTotalSv = ko.computed(function() {
        return "Matting...." +centsToDollars(model.mattingSubTotal());
        });//end  model.mattingSubTotal
    model.framingSubTotal = ko.computed(function() {
        return self.origNum() * self.origFramedCost() + self.reproNum() * self.reproFramedCost();
        });//end  model.framingSubTotal
    model.framingSubTotalSv = ko.computed(function() {
        return "Framing...." +centsToDollars(model.framingSubTotal());
        });//end  model.productsSubTotal
    model.rowSubTotal = ko.computed(function() {
        return model.productsSubTotal() +model.mattingSubTotal() + model.framingSubTotal();
        });//end  model.rowsSubTotal
    model.rowSubTotalSv = ko.computed(function() {
        return "Item Subtotal.." +centsToDollars(model.rowSubTotal());
        });//end  model.productsSubTotal
};// END rowOrder

2.0我创建了一个映射变量，如下所示：

var mapping = {
                create: function(options) {
                    return new rowOrder(options.data);
                }

            };

3,0我创建了一个View Model，如下所示：

function ViewModel() {
    // direct items for whole page
    var self = this;
    this.cartId = ko.observable(cartDB);
    this.cartIdSv =  ko.computed(function() {
        var sv = "Cart Number: "+ self.cartId();
        return sv;
    },this);//
    this.totalPrice = ko.computed(function() {//to DO COMPUTE
        var int = 10000;
        return int;
    },this);
    this.totalPriceSv = ko.computed(function(){
        return "Total Price*: " + centsToDollars(this.totalPrice());
    },this);
// by row items
    this.cartItems = ko.mapping.fromJS(cartItems, mapping);
}// end ViewModel

4.0在ajax成功回调中：

success: function(data) {
cartItems = data;
ViewModel();

5.0我把ko.apply.bindings（新的ViewModel）放在ajax完全回调中。

结果是我的相关页面出现了预期的最初设置的计算值。

我仍在研究如何更新此页面。当用户点击或取消选中复选框时，我无法让我的代码重新计算计算变量。

如果没有stackOverflow组的建议，我无法做到这一点。感谢大家对我在谷歌上发现的帖子。

为什么我的html5类找不到我的可观察数组内容？

1 个答案: