左側に要素を選択できるコントロールがあるマスタースレーブ Web ページを実装しようとしています。右側には、選択した要素の詳細が表示されます。私は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アクションは、部分ビューを制御する別の KO のビューモデルが必要な PartialView を返します。どうやってするの？私の問題に対するより良い解決策があるかもしれませんか？
同様の問題がありますが、このソリューションを使用すると、コントローラーに 2 回クエリを実行する必要があります。1 回目は VM を取得し、2 回目はビューを取得しますね。
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>