首页 > 其他分享 >Spartacus search box 里显示的产品列表数据是从哪里进行搜索的

Spartacus search box 里显示的产品列表数据是从哪里进行搜索的

时间:2023-07-15 11:02:45浏览次数:30  
标签:box Observable search Spartacus 订阅 viewMode add mode model

如下图所示,selector:cx-searchbox

Component 名称:Search-box.component.ts

点击 search bar 之后:

添加 css 类:

在断点停下来的地方,查看搜索结果列表:

抛出 ProductSearch 的 action:

最后调用 ProductSearchConnector 进行搜索:

dispatch 到 adapter:

ProductList Component 里这段代码:


    this.subscription.add(
      combineLatest([this.model$, this.viewMode$])
        .pipe(
          skip(1),
          filter(([model, mode]) => !!model && !!mode)
        )
        .subscribe((model) =>{
          this.globalMessageService.add(
            { key: 'sorting.pageViewUpdated' },
            GlobalMessageType.MSG_TYPE_ASSISTIVE,
            500
          );
          console.log('Jerry:', model);
        }
        )
    );
  }

首先,private subscription = new Subscription(); 这行代码声明了一个新的 Subscription 对象。在 RxJS 中,Subscription 对象用于表示可观察对象(Observable)的执行,主要用于取消订阅。

接下来的代码块是 this.subscription.add(),表示将一个新的订阅添加到 subscription 对象中。被添加的订阅是 combineLatest([this.model$, this.viewMode$]) 返回的 Observable 对象的订阅。

combineLatest([this.model$, this.viewMode$]) 是 RxJS 的一个函数,用于将多个 Observable 合并成一个 Observable。当任何一个输入的 Observable 发出值,它就会发出每个输入 Observable 的最新值的数组。在这里,它合并了 this.model$this.viewMode$ 这两个 Observable 对象。

.pipe() 是用于组合多个函数的操作符,它将一个 Observable 转换为另一个 Observable。在这里,它包含了两个操作符:skip(1)filter(([model, mode]) => !!model && !!mode)

skip(1) 会忽略源 Observable 发出的前 1 个值,只对其后发出的值感兴趣。

filter(([model, mode]) => !!model && !!mode) 会过滤掉不满足条件的值。在这里,条件是 modelmode 两个值都存在。如果 modelmode 中有一个不存在(nullundefinedfalse0NaN 或空字符串),过滤器就会忽略这个值。

.subscribe((model) => { ... }) 表示对 Observable 的订阅。订阅就是 Observable 的执行,即开始接收值。在这里,当 modelmode 都存在时,回调函数就会被调用。

回调函数里,this.globalMessageService.add() 是调用 globalMessageServiceadd 方法,添加一个全局消息。console.log('Jerry:', model); 是输出日志,显示 model 的值。

总的来说,这段代码的主要功能是:当 this.model$this.viewMode$ 的值发生变化并且都存在时,添加一个全局消息,并在控制台打印 model 的值。

标签:box,Observable,search,Spartacus,订阅,viewMode,add,mode,model
From: https://www.cnblogs.com/sap-jerry/p/17555784.html

相关文章

  • 关于 Spartacus ProdutList Component Service model$ 的填充逻辑
    源代码:这段代码是Angular中的RxJS代码,主要是创建一个名为model$的Observable对象,这个对象的生成逻辑复杂一些,主要涉及using,subscribe,pipe,shareReplay等函数的使用。逐行解释如下:readonlymodel$:Observable<ProductSearchPage>=using(这一行定义了一个......
  • 什么是 SAP Spartacus 的 CMS Page Connector
    SAPSpartacus是一个开源的JavaScriptweb应用程序,它与SAPCommerceCloud的后端进行交互。这是一个基于Angular和RxJS的库,具有良好的扩展性,允许开发人员以模块化的方式创建和管理SAPCommerceCloud的用户界面。而CMSPageConnector是Spartacus提供的一种连接器,......
  • Elasticsearch:使用 runtime fields 探索你的数据
    Elasticsearch考虑要提取字段的大量日志数据。为数据建立索引非常耗时,并且会占用大量磁盘空间,而你只想探索数据结构而无需预先提交schema。你知道你的日志数据包含你要提取的特定字段。在这种情况下,我们要关注@timestamp和消息字段。通过使用运行时字段(runtimefields),你可以......
  • c# PasswordBoxHelper
    1publicclassPasswordBoxHelper2{3publicstaticreadonlyDependencyPropertyPasswordProperty=DependencyProperty.RegisterAttached("Password",typeof(string),typeof(PasswordBoxHelper),4newPropertyMetadata(......
  • 在Docker上实战ElasticSearch以及与SpringBoot集成
    简介项目地址:https://gitee.com/charlinchenlin/wysmallElasticsearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于RESTfulweb接口。Elasticsearch是用Java语言开发的,并作为Apache许可条款下的开放源码发布,是一种流行的企业级搜索引擎。Elastic......
  • Docker安装ElasticSearch
    Docker安装ElasticSearch标签(空格分隔):linux安装ElasticSearch版本:elasticsearch:7.10.1mkdir-p/usr/local/elasticsearch/configmkdir-p/usr/local/elasticsearch/datachmod777-R/usr/local/elasticsearch/echo"http.host:0.0.0.0">>/usr/local/el......
  • WPF CheckBox勾选框大小设置
    1、设置CheckBox,FontSize,只有字体发生变化,前面的勾选框太小,可以设置LayoutTransform<StyleTargetType="CheckBox"><SetterProperty="HorizontalAlignment"Value="Left"/><SetterProperty="LayoutTra......
  • jQuery: message box
     https://www.codeproject.com/articles/263531/jquery-message-box-pluginhttps://dotctor.github.io/jQuery.msgBox/https://www.c-sharpcorner.com/UploadFile/bc1c71/display-message-box-in-center-of-window-using-jquery/https://www.queness.com/post/1696/create-a-......
  • 界面控件DevExtreme v23.1新版亮点 - 全新的DateRangeBox组件
    DevExtreme拥有高性能的HTML5/JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NETCore,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NETCore或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中......
  • 获取input[type="checkbox"]:checked 所在tr中特定元素
    1.要求如下 2.html源码<divclass="btn"><buttontype="button"onclick="getYuan()">获取</button></div><divclass="forms"><table><tbody>......