如何将项目从淘汰赛 foreach 传递到部分视图作为数据绑定?
How to pass an item from knockout foreach to partial view as data-bind?
我有一个 table,其中包含对象列表 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
的值?由于它是用代码编写的, myProperty
由 ko with
传递,因此在局部视图中我可以访问整个 myListB()
或 myPropertyA
。用 ko with: $data
包装局部视图没有帮助,我仍然只能访问 myPropertyA
和整个 myListB()
。
我这里不能去掉foreach和partial view,应该保持现在的样子,问题是数据绑定一个数组项从foreach到partial view的可能性
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>
您尝试做的问题是 knockoutjs 在客户端浏览器中运行,而 @await Html.PartialAsync
在服务器上运行。当 knockoutjs 处理 myListB
的内容时,服务器已经处理并将部分视图呈现为 html 作为 table 行的一部分。
所以我认为您在客户端看到的内容与浏览器中的内容类似。
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)" />
我看到的部分问题是部分视图被添加到 table 的中间,浏览器正在努力正确呈现 table。
如果您在局部视图周围添加 <td></td>
标记,则 table 将正确呈现。
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)" />
我有一个 table,其中包含对象列表 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
的值?由于它是用代码编写的, myProperty
由 ko with
传递,因此在局部视图中我可以访问整个 myListB()
或 myPropertyA
。用 ko with: $data
包装局部视图没有帮助,我仍然只能访问 myPropertyA
和整个 myListB()
。
我这里不能去掉foreach和partial view,应该保持现在的样子,问题是数据绑定一个数组项从foreach到partial view的可能性
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>
您尝试做的问题是 knockoutjs 在客户端浏览器中运行,而 @await Html.PartialAsync
在服务器上运行。当 knockoutjs 处理 myListB
的内容时,服务器已经处理并将部分视图呈现为 html 作为 table 行的一部分。
所以我认为您在客户端看到的内容与浏览器中的内容类似。
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)" />
我看到的部分问题是部分视图被添加到 table 的中间,浏览器正在努力正确呈现 table。
如果您在局部视图周围添加 <td></td>
标记,则 table 将正确呈现。
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)" />