我正在尝试实现主从网页，左侧是一个控件，您可以在该控件上选择一个元素。右侧显示了所选元素的详细信息。我正在使用 asp.net mvc，并且我已经实现了下载（使用 ajax）元素详细信息的主控制。
编辑
感谢 photo_tom 的回复和我的进一步研究，我设法重新加载子视图模型和详细信息子页面。不幸的是它不起作用:(如果我做类似的事情它工作正常。但如果我只尝试动态放置内部html并随后更改视图模型，它会失败。如何使绑定与动态替换元素的innerHtml一起工作？
@{
ViewBag.Title = "Products";
}
<h2>Products</h2>
<div class="ms-master">
<select size="15" data-bind="
options: Products,
optionsText: 'Name',
value: CurrentProduct
">
</select>
</div>
<div class="ms-slave" data-bind="
with: CurrentProductVM">
<div data-bind="html: $parent.CurrentProductHtml" />
</div>
<script type="text/javascript" language="javascript">
function Product(data) {
var self = this;
ko.mapping.fromJS(data, {}, this);
};
function ViewModel(data) {
var self = this;
if (data != undefined) {
ko.mapping.fromJS(data, {
'Products': {
'create': function(d) {
return new Product(d.data);
}
}
}, this);
}
self.CurrentProductHtml = ko.observable();
self.CurrentProductVM = ko.observable();
self.CurrentProduct = ko.observable();
self.OnCurrentProduct = function(value) {
$.getJSON(
self.DetailsUrl(),
{ id: value.Id() },
function (result) {
self.CurrentProductVM(result.Model);
self.CurrentProductHtml(result.View);
}
);
};
self.CurrentProduct.subscribe(self.OnCurrentProduct);
};
$(function () {
var model = @Html.Raw(Json.Encode(Model.Data));
var vm = new ViewModel(model);
ko.applyBindings(vm);
});
</script>
旧帖子
控制器上的Details操作返回 PartialView，我希望在其上拥有一个单独的 KO 视图模型来控制局部视图。怎么做？也许我的问题有更好的解决方案？
这是类似的问题，但使用此解决方案我必须查询控制器两次：一次获取 VM，第二次获取视图，不是吗？
JS
function Product(data) {
var self = this;
ko.mapping.fromJS(data, {}, this);
self.AsyncDetails = ko.observable();
self.OnSelect = function() {
$.get(
'@Url.Action("Details", "ProductsMgm")',
{ id: self.Id() },
function (e) {
self.AsyncDetails(e);
}
);
};
};
function ViewModel(data) {
var self = this;
if (data != undefined) {
ko.mapping.fromJS(data, {
'Products': {
'create': function(d) {
return new Product(d.data);
}
}
}, this);
}
self.CurrentProduct = ko.observable();
self.OnCurrentProduct = function(value) {
value.OnSelect();
};
self.CurrentProduct.subscribe(self.OnCurrentProduct);
};
** HTML **
<div class="ms-master">
<select size="15" data-bind="
options: Products,
optionsText: 'Name',
value: CurrentProduct
">
</select>
</div>
<div class="ms-slave" data-bind="
with: CurrentProduct">
<div data-bind="html: AsyncDetails" ></div>
</div>