如何在foreach循环中分别处理自动生成的li元素中的observable [英] how to handle observable in automatically generated li element in foreach loop separately

问题描述

在每个循环的内部，使用bootstrap我已经通过ul和li元素创建了下拉列表。当我点击li元素时，下拉列表的名称应该更改为选定的名称。



我使用KnockoutJS观察变量来实现上述功能。但问题在于选择由ui和li元素组成的下拉列表中的值。

无法重命名单个下拉列表名称。它实际上重命名了由foreach循环生成的所有下拉按钮名称。



请建议一些解决方案，其中只更新选定的下拉名称而不是所有下拉菜单。



以下是我的HTML和KnockOutJS

inside a for each loop, using bootstrap i have created dropdown list by ul and li elements. when i click on li element the name of the dropdown should change to the selected one.

i acchved the above functnality by using KnockoutJS obserble variable. but the problem come in selecting a value in dropdown made up of ui and li elements.
insted of renaming a single dropdown name. it actually renaming all dropdown button name which got generated by foreach loop.

please suggest some solution where only selected dropdown name should updated instead of all dropdowns.

below is my HTML and KnockOutJS

<a id="ddlApprType" href="#" class="btn btn-default btn-sm" data-toggle="dropdown" role="button"> <i class="fa fa-rocket"></i> <span class="caret"></span>
                                                          <span data-bind="    text: $root.PRespConfigName_Appr"></span>
                                                     </a>
                                                     <ul class="dropdown-menu " role="menu" aria-labelledby="ddlLikeType">
                    <li class="dropdown-submenu"><a href="#">Professional</a>
                  <ul class="dropdown-menu scrollable-menu" role="menu" data-bind="foreach: { data: $root.SC_ESN_PostResponsesTypeConfigs_Professional, as: 'Professional' }">
                    <li role="presentation">
                        <a href="#" data-bind='click: $root.SC_ESN_PostResponsesTypeConfigslst_Professional'>
                            <img data-bind="    attr: { 'src': Professional.ESN_RespThumbnailImg }" src="#"/>
                            <span data-bind="    text: Professional.ESN_PRespConfigName"></span>
                        </a>
                    </li>
                </ul>
                        </li>
                                                         <li  class="dropdown-submenu"> <a href="#">Personal</a>
                                                              <ul class="dropdown-menu scrollable-menu" role="menu" data-bind="foreach: { data: $parent.SC_ESN_PostResponsesTypeConfigs_Personal, as: 'Personal' }">
                    <li role="presentation">
                        <a href="#" data-bind='click: $root.SC_ESN_PostResponsesTypeConfigslst_Personal'>
                            <img data-bind="    attr: { 'src': Personal.ESN_RespThumbnailImg }" src="#"/>
                            <span data-bind="    text: Personal.ESN_PRespConfigName"></span>
                        </a>
                    </li>
                </ul>
                                                         </li>
                                                         </ul> 

这里是我的KnockoutJS函数来重命名按钮

here is my KnockoutJS function to rename the button

self.PRespConfigId_Appr=ko.observable();
        self.PRespConfigName_Appr = ko.observable();
        self.ESN_RespImg_Appr = ko.observable();
        self.ESN_RespThumbnailImg_Appr = ko.observable();

        self.SC_ESN_PostResponsesTypeConfigslst_Personal = function () {
            self.PRespConfigId_Appr(this.ESN_PRespConfigId);
            self.PRespConfigName_Appr(this.ESN_PRespConfigName);
            self.ESN_RespImg_Appr(this.ESN_RespImg);
            self.ESN_RespThumbnailImg_Appr(this.ESN_RespThumbnailImg);
        };</pre>

推荐答案

root.PRespConfigName_Appr > < / span >
< / a >
< ul class = 下拉列表-menu 角色 = menu aria-labelledby < SP class =code-keyword> = ddlLikeType >
< li class = dropdown-submenu > < a href = ＃ > 专业< / a >
< ul class = 下拉菜单可滚动菜单 角色 = menu data-bind = foreach：{data：

root.PRespConfigName_Appr"></span> </a> <ul class="dropdown-menu " role="menu" aria-labelledby="ddlLikeType"> <li class="dropdown-submenu"><a href="#">Professional</a> <ul class="dropdown-menu scrollable-menu" role="menu" data-bind="foreach: { data:

root.SC_ESN_PostResponsesTypeConfigs_Professional，as：'Professional'} >
< li 角色 = 演示文稿 >
< a href = ＃ data-bind =' 点击：

root.SC_ESN_PostResponsesTypeConfigs_Professional, as: 'Professional' }"> <li role="presentation"> <a href="#" data-bind='click:

root.SC_ESN_PostResponsesTypeConfigslst_Professional' >
< img data-bind = attr：{'src'：Professional.ESN_RespThumbnailImg } src = ＃ / >
< span data- bind = text：Professional.ESN_PRespConfigName > < / span > ;
< / a >
< / li >
< / ul >
< / li >
< li class = dropdown-submenu > < a href = ＃ > 个人< / a >
< ul class = 下拉菜单可滚动菜单 角色 = menu data-bind = foreach：{data：

root.SC_ESN_PostResponsesTypeConfigslst_Professional'> <img data-bind=" attr: { 'src': Professional.ESN_RespThumbnailImg }" src="#"/> <span data-bind=" text: Professional.ESN_PRespConfigName"></span> </a> </li> </ul> </li> <li class="dropdown-submenu"> <a href="#">Personal</a> <ul class="dropdown-menu scrollable-menu" role="menu" data-bind="foreach: { data:

这篇关于如何在foreach循环中分别处理自动生成的li元素中的observable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！