如何将项目从淘汰赛 foreach 传递到部分视图作为数据绑定？

Posted 2023-03-27

【中文标题】如何将项目从淘汰赛 foreach 传递到部分视图作为数据绑定？

【英文标题】：How to pass an item from knockout foreach to partial view as data-bind?

【发布时间】：2021-04-25 05:05:55

【问题描述】：

我有一个包含对象列表 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()的每一项的987654328@？因为它是用代码编写的， myProperty 由ko with 传递，所以在部分视图中我可以访问整个myListB() 或myPropertyA。用ko with: $data 包裹部分视图没有帮助，我仍然只能访问myPropertyA 和整个myListB()。 我不能在这里摆脱 foreach 和局部视图，它应该保持现在的状态，问题是关于将数组项从 foreach 数据绑定到局部视图的可能性

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>

【参考方案1】：

您尝试做的问题是，knockoutjs 在客户端浏览器中运行，而@await Html.PartialAsync 在服务器上运行。当 knockoutjs 正在处理 myListB 的内容时，服务器已经将部分视图处理并呈现为 html 作为表格行的一部分。

所以我认为您在客户端看到的内容类似于浏览器中的以下内容。

    function viewModel() 
      var self = this;
      self.myProperty = ko.observable(new Foo());

    

    function Foo() 
      var self = this;
      self.myListB = ko.observableArray([new Model1(), new Model1()]);
      self.myPropertyA = '';
    

    function Model1() 
      var self = this;
      self.Property1 = "test 1";
      self.Property2 = "test 2";
    

    var vm = new viewModel();

    ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!--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>

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

    </tr>
    <!-- /ko -->
  </tbody>
</table>
<!-- /ko -->

<pre data-bind="text: ko.toJSON($root)" />

我可以看到的部分问题是部分视图被添加到表格的中间并且浏览器正在努力正确地呈现表格。

如果您在局部视图周围添加<td></td> 标记，则表格将正确呈现。

    function viewModel() 
      var self = this;
      self.myProperty = ko.observable(new Foo());

    

    function Foo() 
      var self = this;
      self.myListB = ko.observableArray([new Model1(), new Model1()]);
      self.myPropertyA = '';
    

    function Model1() 
      var self = this;
      self.Property1 = "test 1";
      self.Property2 = "test 2";
    

    var vm = new viewModel();

    ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!--ko with: myProperty-->
<table class="table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      
    </tr>
  </thead>
  <tbody>
    <!-- ko foreach: myListB-->
    <tr>
      <td data-bind="text: Property1"></td>
      <td data-bind="text: Property2"></td>
      <td>
        <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>
      </td>
    </tr>
    <!-- /ko -->
  </tbody>
</table>
<!-- /ko -->

<pre data-bind="text: ko.toJSON($root)" />