¿Cómo inicializar la página ViewModel de (parcial) en Durandal / ASP.NET MVC?

Question

Tengo este enfoque (generando archivos HTML de CSHTML) .

y la estructura de directorio estándar de Durandal (nada especial).

en algunas de mis páginas ( parcial ) Tengo lo siguiente (entre otros) (subpágina1.cshtml (referenciado como 'subpage1.html' en 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 es ko.observable() en mi código ViewModel)

Llene los datos de forma dependiente de la sesión del usuario actual . Eso es Bastante conveniente para hacer con Razor. En este caso, no necesito que los datos del menú desplegable se presentarán en ViewModel de mi Durandal (me refiero a toda la lista). Sin embargo, i necesita que se aplique el valor seleccionado del menú desplegable a ViewModel (subpage1.js) de la página (cuando la página está cargada).

¿Cuál es la mejor manera (y si hay alguna) para manejar esta situación? Seguramente entiendo, eso idealmente debería cargar la página como una estática (solo con los enlaces de Knockout), luego realice una solicitud AJAX al servidor y luego vincule los datos cargados. Pero, a) usar la sintaxis de Razor es mucho más conveniente y limpia; b) que involucra la solicitud AJAX adicional (y la lógica de servidor adicional).

---

Otro enfoque que veo es notificar al ViewModel sobre la página que se carga de alguna manera y se establece (probablemente, manualmente a través de JavaScript) el valor actual de EnergyID. Como <script type='text/javascript'> myViewModelIgetSomehow.facilityId(45); </script>. Pero eso también parece no el mejor enfoque.

¿Alguna idea sobre eso?

---

Esa es realmente una pregunta sobre cómo manejar el último pensamiento mencionado ( cómo pasar algunos valores de la página cargada de la página1.cshtml a ViewModel subpage1.js ) No solo cómo manejar Razor + Durandal ViewModel .

¡Gracias!

Answer 1

Creo que su mejor opción sería crear una encuadernación personalizada para Knockout.Aquí hay un ejemplo simple:

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());
    }
}

Puede usar ese enlace de la siguiente manera:

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

Aquí hay un violín que pone todo el asunto .Espero que ayude!