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

Posted 2023-03-27

【中文标题】为啥我的 html5 类找不到我的可观察数组内容？

【英文标题】：Why can't my html5 class find my observable array contents?为什么我的 html5 类找不到我的可观察数组内容？

【发布时间】：2014-03-28 17:03:05

【问题描述】：

提前感谢您的帮助。我花了几个星期在网上搜索一些见解。我已经开发代码 50 多年了，但我是一个相当新的 javascript、html、淘汰赛。从我所见，如果我能弄清楚如何使它工作，这将是很棒的。下面给出的示例只是我尝试过的许多事情之一。请指教。

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

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

这是我收到的错误消息：

未捕获的 ReferenceError: 无法处理绑定“foreach: function ()return cartItems ” 消息：无法处理绑定“文本：函数（）return itemSubTotal（）” 消息：未定义 itemSubTotal (19:41:39:172 | error, javascript)

这是我的视图模型的全局数据： var cartDB = ""; var totalPrice = "100"; var cartItems = 新数组；

这是视图模型：

  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 sn-p。

<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"-->

【问题讨论】：

itemSubTotal 不在 AJAX 调用返回的模型中。您也没有将返回的模型转换为具有可观察属性的视图模型。如果您只是将其保留为纯 JavaScript 对象，则需要删除绑定中的 ()s。

我建议在 ajax 调用中使用 console.log(data) 检查传入的数据，以查看 itemSubTotal 是否真的丢失或拼写错误。此外，据我所知，ViewModel 应该被实例化为 new ViewModel()，即使用括号。

感谢您的帮助。我没有意识到缺少 itemSubTotal 的计算函数导致整个事情都挂了。我暂时删除了该行，所有项目的标题都出现了。

【参考方案1】：

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

问题可以更好地表述为：给定一个 2 x 17 数组（2 行和 17 列独立变量）创建一个包含 2 行和 17 列的 observableArray，其中包含 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 我创建了一个视图模型如下：

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(new ViewModel) 放在 ajax 完成回调中。

结果是我相当复杂的页面按预期出现，并带有最初设置的计算值。

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

如果没有 *** 小组的建议，我无法做到这一点。感谢大家为我在谷歌上找到的帖子。