knockout.js 如何将一个条目从knockout foreach传递到partial视图作为数据绑定?

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

我有一个表,其中包含对象的列表myListB(),这些对象由knockout foreach显示,行数与myListB().Count一样多。

<!--ko with: myProperty-->
    <table class="table">
                    <thead>
                        <tr>
                            <th>Column 1</th>
                            <th>Column 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- ko foreach: myListB()-->
                        <tr>
                            <td data-bind="text: Property1"></td>
                            <td data-bind="text: Property2"></td>
                            @await Html.PartialAsync("~/Views/MyView.cshtml", this)
                        </tr>
                        <!-- /ko -->
                    </tbody>
                </table>
  <!-- /ko -->

数据模型:

class viewmodel{
    public myProperty:Foo;

    }
    class Foo{
public myListB: KnockoutObservableArray<Model1> = ko.observableArray([])
public myPropertyA:string;
    }
 class Model1{
    public Property1:any;
    public Property2:any;
    }

是否有方法将项目从foreach传递到局部视图MyView.cshtml(它将是Model1类型对象),因此我可以在局部视图中将其用于data-bind,并访问数组myListB()中每一项的Property1值。正如用代码编写的那样, myPropertyko with传递,因此在局部视图中,我可以访问整个myListB()myPropertyA。使用ko with: $data Package 局部视图没有帮助,我仍然只能访问myPropertyA和整个myListB()。我无法在此处删除foreach和局部视图,它应该保持原样,问题是关于从foreach到partial视图的数组项的数据绑定的可能性
MyView.cshtml:

<div class="modal"
      role="dialog">
    <div class="modal-dialog"
         role="document">
        <div class="modal-content ">
            <div class="modal-header">
                <h4 class="modal-title">MyTitle</h4>
            </div>
            <!--ko if: $data!=null -->
            <div class="modal-body ">
                <span data-bind="text: $data.Property1"></span>
            </div>
            <!-- /ko -->
        </div>
    </div>
</div>
6ovsh4lw

6ovsh4lw1#

您尝试执行的操作的问题在于,knockoutjs在客户端浏览器中运行,而@await Html.PartialAsync在服务器上运行。当knockoutjs处理myListB的内容时,服务器已经处理了部分视图并将其呈现为html,作为表行的一部分。
因此我认为您在客户端看到的浏览器内容如下所示。
第一个
我可以看到的部分问题是部分视图被添加到表的中间,浏览器很难正确地呈现表。
如果您在局部视图周围添加一个<td></td>标签,那么表格将正确呈现。
第一个

相关问题