如何在Durandal中从（部分）页面初始化ViewModel/ASP.NET MVC？

Question

我有 这种方法（从cshtml生成html文件）.

和 Durandal的标准目录结构 （没什么特别的）。

在我的一些页面上（部分一）我有以下（除其他外）（SubPage1。cshtml(引用为'SubPage1.html'在durandal））:

...
<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>
...

(facilityId 是 ko.observable() 在我的ViewModel代码中）

我填写数据 依赖于当前用户的会话.那是 相当方便 和剃刀有关。在这种情况下，我不需要下拉列表中的数据显示在我的Durandal的ViewModel中（我的意思是它的整个列表）。然而，我 需要将下拉列表的选定值应用于ViewModel （SubPage1.js）从页面（页面加载时）。

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

---

我看到的另一种方法是通知ViewModel有关页面以某种方式加载并设置（可能，通过javascript手动）facilityId当前值。像 <script type='text/javascript'> myViewModelIgetSomehow.facilityId(45); </script>.但这看起来也不是最好的方法。

对此有什么想法吗？

---

这实际上是一个如何处理最后提到的想法的问题（如何从页面加载的SubPage1中传递一些值。cshtml到ViewModel SubPage1。js的）不仅仅是如何处理Razor+Durandal ViewModel。

谢谢！

Answer 1

我认为你最好的选择是为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>

这里有一把小提琴把整个事情放在一起.希望有帮助！