2014-02-25 38 views
0

我有this approach (generating html files from cshtml)如何从Durandal/ASP.NET MVC中的(部分)页面初始化ViewModel?

And Durandal的标准目录结构(没什么特别的)。

在我的一些网页(部分一个)我有以下的(等等)的(SubPage1.cshtml(如迪朗达尔 'SubPage1.html')引用):

... 
<select data-bind="event: { change: doSomething }, value: facilityId"> 
     <option value="0">Any Facility</option> 

     @foreach (var facility in Data.CurrentUserFacilities()) 
     { 
      <option value="@facility.FacilityId" selected="@CertainCondition">@facility.FacilityName</option> 
     } 
</select> 
... 

facilityIdko.observable()在我的ViewModel代码)

我填写数据依赖于当前用户的会话。这是很方便与剃刀。在这种情况下,我不需要从Durandal的ViewModel中显示下拉列表中的数据(我的意思是整个列表)。但是,I 确实需要从页面应用到ViewModel(SubPage1.js)的下拉选定值(加载页面时)。

处理这种情况的最佳方式是什么(如果有的话)? 我当然明白,理想情况下我应该将页面加载为静态页面(仅限Knockout绑定),然后对服务器执行一些Ajax请求,然后绑定加载的数据。但是,a)使用Razor语法更加方便和干净; b)涉及额外的ajax请求(和额外的服务器逻辑)。


另一种方法我看到的是通知视图模型有关的页面加载不知何故并设置(可能是,通过JavaScript手动)的facilityId当前值。像<script type='text/javascript'> myViewModelIgetSomehow.facilityId(45); </script>。但是这看起来不是最好的方法。

对此有何看法?


这实际上是相当一个问题,如何处理最后提到的思想(如何从网页加载SubPage1.cshtml一些值传递给视图模型SubPage1.js)不只是如何处理剃刀+迪朗达尔视图模型。

谢谢!

回答

1

我认为你最好的选择是创建一个自定义绑定淘汰赛。这里有一个简单的例子:

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> 

Here's a fiddle which puts the whole thing together。希望有所帮助!

+0

你能解释在这种情况下“更新”部分的目的吗? – Agat

+0

如果更改视图模型上的值(例如在页面加载后),将更新组合框。 [这里是一个更新的小提琴](http://jsfiddle.net/Km646/1/)来显示绑定处理程序的更新部分用于什么。 – gerrod