Come inizializzare il ViewModel dalla pagina (parziale) in Durandal / ASP.NET MVC?

Question

Ho preso Questo approccio (generando file HTML da CSHTML) .

e Durandal's Standard Directory Structure (Niente di speciale).

su alcune delle mie pagine ( parziale one ) Ho il seguente (tra gli altri) (sottopage1.cshtml (referenziato come 'sottopage1.html' in 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() nel mio codice ViewModel)

Io riempimento i dati dipendentemente dalla sessione dell'utente corrente . Questo è piuttosto conveniente a che fare con il rasoio. In questo caso non ho bisogno dei dati da DropDown da presentare nel viewModel del mio Durandal (intendo la sua intera lista). Tuttavia, I ha bisogno del valore selezionato DropDown da applicare a ViewModel (sottopage1.js) dalla pagina (quando la pagina è caricata).

Qual è il modo migliore (e se ce ne è) per gestire questa situazione? Caramente capisco, che idealmente dovrei caricare la pagina come statica (solo con attacchi knockout), quindi eseguire qualche richiesta Ajax al server e quindi associare i dati caricati. Ma, a) usando la sintassi del rasoio è molto più conveniente e pulito; b) che comporta ulteriori richieste AJAX (e logica del server aggiuntiva).

---

.

Un altro approccio che vedo è quello di notificare che il mirino sulla pagina sia caricato in qualche modo e impostato (probabilmente, manualmente via JavaScript) il valore corrente di facilityID. Come <script type='text/javascript'> myViewModelIgetSomehow.facilityId(45); </script>. Ma questo sembra anche l'approccio migliore.

Qualche idea su questo?

---

.

Questa è in realtà una domanda come gestire l'ultimo pensiero menzionato ( Come passare alcuni valori dalla pagina Caricata sottopage1.cshtml a ViewModel Subpage1.js ) Non solo come gestire il rasoio + Durandal ViewModel .

Grazie!

Answer 1

Penso che la tua migliore opzione sia quella di creare un legame personalizzato per il knockout.Ecco un semplice esempio:

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

.

È possibile utilizzare quel legame come segue:

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

.

Ecco un violino che mette insieme il tutto il resto .Spero che Aiuta!