Javascript 如何在Durandal/ASP.NET MVC中从(部分)页面初始化ViewModel?
我有 和杜兰达尔的标准目录结构(没有特别之处) 在我的一些页面(第一部分)中,我有以下内容(除其他外)(SubPage1.cshtml(在durandal中被称为“SubPage1.html”):Javascript 如何在Durandal/ASP.NET MVC中从(部分)页面初始化ViewModel?,javascript,asp.net-mvc,razor,knockout.js,durandal,Javascript,Asp.net Mvc,Razor,Knockout.js,Durandal,我有 和杜兰达尔的标准目录结构(没有特别之处) 在我的一些页面(第一部分)中,我有以下内容(除其他外)(SubPage1.cshtml(在durandal中被称为“SubPage1.html”): 。。。 任何设施 @foreach(Data.CurrentUserFacilities()中的var设施) { @facility.FacilityName } ... (facilityId在我的ViewModel代码中是ko.observable()) 我根据当前用户的会话填充数据。用剃须刀很
。。。
任何设施
@foreach(Data.CurrentUserFacilities()中的var设施)
{
@facility.FacilityName
}
...
(facilityId
在我的ViewModel代码中是ko.observable()
)
我根据当前用户的会话填充数据。用剃须刀很方便。在这种情况下,我不需要在Durandal的ViewModel(我指的是它的整个列表)中显示下拉列表中的数据。但是,我确实需要将下拉列表的选定值应用于页面中的ViewModel(SubPage1.js)(加载页面时)
处理这种情况的最佳方法是什么(如果有的话)?
我当然理解,理想情况下,我应该将页面作为静态页面加载(仅使用敲除绑定),然后向服务器执行一些ajax请求,然后绑定加载的数据。但是,a)使用Razor语法更加方便和干净;b) 这涉及到额外的ajax请求(和额外的服务器逻辑)
我看到的另一种方法是通知ViewModel页面以某种方式加载,并设置(可能是通过javascript手动设置)facilityId当前值。比如
myViewModelIgetSomehow.facilityId(45)代码>。但这似乎也不是最好的办法
有什么想法吗
这实际上是一个如何处理上面提到的想法的问题(如何将一些值从页面加载的SubPage1.cshtml传递到ViewModel SubPage1.js),而不仅仅是如何处理Razor+Durandal ViewModel
谢谢大家! 我认为您最好的选择是为knockout创建自定义绑定。下面是一个简单的例子:
ko.bindingHandlers["serverCombo"] = {
init: function (element, valueAccessor) {
var $element = $(element);
var options = ko.unwrap(valueAccessor());
var observableTarget = options.value;
$element.change(function onElementChanged() {
var newValue = $element.val();
observableTarget(newValue);
});
},
update: function (element, valueAccessor) {
var $element = $(element);
var options = ko.unwrap(valueAccessor());
var observableTarget = options.value;
$element.val(observableTarget());
}
}
然后可以按如下方式使用该绑定:
<select data-bind="serverCombo: { value: facilityId }">
<option value="1">The Deck</option>
<option value="2">The Pool</option>
<option value="3">The Shagpile Carpet and Mirrored Ceiling room</option>
</select>
甲板
游泳池
毛绒地毯和镜面天花板房间
。希望有帮助 在这种情况下,您能否解释“更新”部分的用途?如果您更改视图模型上的值(例如,在加载页面后),将更新组合框。显示绑定处理程序的更新部分的用途。
<select data-bind="serverCombo: { value: facilityId }">
<option value="1">The Deck</option>
<option value="2">The Pool</option>
<option value="3">The Shagpile Carpet and Mirrored Ceiling room</option>
</select>