knockout.js Knockout中的可观测阵列搜索问题

o8x7eapl  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(212)

概述

这是一个简单的报价应用程序。我目前正在开发主报价页面,在那里显示所有报价。
问题所在
我试图在主报价列表中显示客户名称。(见图)。该页面所依赖的数据位于两个表中:

1.报价--保存报价详细信息
1.客户--保存客户联系信息
这些表通过client_id连接(相关)

淘汰实施

我定义了一个类来保存引号:

let QuoteModel = function(id, quote_number, created_date, expiration_date, amount, client, status){

     this.id = ko.observable();
     this.quote_number = ko.observable(quote_number);
     this.created_date = ko.observable(created_date);
     this.expiration_date = ko.observable(expiration_date);
     this.amount = ko.observable(amount);
     this.client = ko.observable(client);
     this.status = ko.observable(status);

}

客户端类

let ClientModel = function(id, fullName){
    this.id = ko.observable(id);
    this.fullName = ko.observable(fullName);
}

在循环通过API导入的引号时,我获取了client_id,然后调用一个函数来搜索clients数组并返回客户机的全名。
我不知道如何成功地搜索客户端阵列并返回全名。

实时URL

您可以在此处看到代码失败:http://quotes.123globalelectronicsllc.com/quotes.html

视图模型

以下是视图模型:

// Quotes View Model

// +---------------------------------------------------------------------------+
// |  Quote View Model                                                         |
// |                                                                           |
// |  quotes-view-model.js                                                     |
// +---------------------------------------------------------------------------+
// |  Shows a list of all Quotes                                               |
// +---------------------------------------------------------------------------+/

let QuoteModel = function(id, quote_number, created_date, expiration_date, amount, client, status){

     this.id = ko.observable();
     this.quote_number = ko.observable(quote_number);
     this.created_date = ko.observable(created_date);
     this.expiration_date = ko.observable(expiration_date);
     this.amount = ko.observable(amount);
     this.client = ko.observable(client);
     this.status = ko.observable(status);

}

let ClientModel = function(id, fullName){
    this.id = ko.observable(id);
    this.fullName = ko.observable(fullName);
}

function QuoteViewModel() {

    var self = this; // Scope Trick

    /* QUOTE Observables */
    self.quotes = ko.observableArray();
    self.clients = ko.observableArray();

    /* GET PAGE DATA */

    /* CLIENTS */
           $.getJSON(apiCustomersAll,
            function(data) {
                var fullName;
                $.each(data,
                    function(key, val) {
                        fullName = val.first_name + " " + val.last_name;
                        self.clients.push(new ClientModel(val.id, fullName));
                    });
            });

          $.getJSON(apiQuotesAll,
            function(data) {
                var fullName;
                $.each(data,
                    function(key, val) {
                        fullName = self.getClientById(val.client_id);
                        console.log(`Full name is ${fullName}`);
                        self.quotes.push(new QuoteModel(val.id, 
                                                        val.quote_number, 
                                                        val.created_date, 
                                                        val.expiration_date, 
                                                        val.amount, 
                                                        fullName, 
                                                        val.status
                                                      ));
                    });
            });

        // Search Client Array, Return Full Name
        self.getClientById = function(id){

            $.each(self.clients(), function(key, val){
               alert(val.fullName);
                if(val.id() == id){
                    return val.fullName();   
                }
            });
        }

}

ko.applyBindings(new QuoteViewModel());

你能看出我哪里出错了吗?如果能提供帮助,我将不胜感激。

jecbmhm3

jecbmhm31#

问题出在您的getClientById方法中,特别是您尝试搜索的方式中-您使用$.each来检查元素:

$.each(self.clients(), function(key, val){
  alert(val.fullName);
  if(val.id() == id){
    return val.fullName();   
  }
});

但是,您不能像尝试的那样从$.each返回。
我们可以在一个特定的迭代中通过回调函数返回false来中断$.each()循环。返回 non-false 与for循环中的continue语句相同;它将立即跳到下一个迭代。
您可以改用Array#find方法:

self.getClientById = function() {
  const client = self.clients().find(function(val){
    return val.id() == id
  }

  if(client) {
    return client.fullName();   
  }

  return undefined;
}

使用一些ES6语法和short-circuiting,这甚至可以更短

self.getClientById = function() {
  const client = self.clients().find(val => val.id() == id);

  return client && client.fullName()
}

相关问题