Как да предам данни (избран елемент) към съставен подробен изглед на Durandal?

Започнах да използвам (от преди няколко часа) Durandal с надеждата да управлявам изгледи и да позволя композиция в рамките на един страница - предишният подход, също използващ Knockout, ставаше твърде тромав за поддържане в дебел HTML файл.

Инсталирах/настроих Durandal и мога да създавам изгледи и изгледи - обаче, не знам как да вкарам данни в изгледа, за да ги използвам като основа за нов изгледмодел.

Например, имам „лява лента за навигация“ за избиране на елементи – когато е избран елемент, той актуализира „избран елемент“, наблюдаван в текущия модел, но трябва също така да зареди правилния „подробен изглед " вдясно: тъй като част от причината да опитате Durandal да раздели компонентите/изгледите, това трябва да дойде от отделен изглед/модел на изглед.

Прочетох документацията, включително Композиция и Използване на композиция, но методът за как да се предават данни към модела на изглед не ми е ясен. Изглежда, че мога да използвам изглед със съществуващ модел (в текущия изглед/обхват), но наистина бих искал просто да използвам някои от текущите данни на модела (т.е. идентификатор), за да извлека „истинските“ данни на модела в гледката.

И така, моите въпроси;

  • Как се обработва предаването на първоначални данни, като например "избран елемент" към модел на изглед? Бих предпочел да използвам декларативното обвързване "compose:", тъй като това прави KO .. KO.

  • Дали това понятие за наличие/предаване на първоначални данни е правилният начин тук или има по-добра алтернатива? Виждал съм бегло споменаване на „activeItem“, но подробностите/използването ме намеква.

Актуализация 1: Намерих Как да споделяме данните между изгледи/Пас изгледът на данни за преглед, но отговорите липсват в реално изпълнение. Наистина бих искал да не споделям модела на изглед между родител-дете (различни двойки изглед/модел на изглед) и бих искал да използвам декларативен подход (без събития). Не е нужно родителят да знае за детето, но детето трябва да получи данни от родителя.

Актуализация 2: Въпреки че по-горе намекнах, че се изисква само „id“, бих искал подход, който работи с всеки основен обект, за който рутерът не е непременно подходящ. Дълбоките връзки не са проблем в този случай. Въпреки това, ако смятате, че рутерът е начинът да се подходи към това, публикувайте аргумент за такъв (с подробности) като отговор и аз поне ще го подкрепя.


viewmodel mvvm parent-child single-page-application durandal
person Community    schedule 10.03.2013    source източник

Отговори (3)


arrow_upward
3
arrow_downward

Ако погледнете бриз изходния код, можете да видите пример за подход на основен детайл.

Те използват активатор, за да съставят дъщерния изглед.

https://github.com/IdeaBlade/Breeze/blob/master/Samples/TempHire/TempHire/App/viewmodels/resourcemgt.js

Не знам дали използвате breeze или не, но подходът не зависи от това как получавате данните.

person Julián Yuste    schedule 11.03.2013
comment
В крайна сметка използвах този подход и той работи, но би било наистина хубаво, ако compose: може да премине activationData, подобно на modalDialog.show(id, activationData) (без хакване на ядрото) .. - person ; 13.03.2013
comment
Функция activationData беше добавена към композицията наскоро. Вярвам, че се предава на метода activate на viewModel. - person neverfox; 02.06.2013

arrow_upward
3
arrow_downward

Има страхотно описание как да направите това със SPA шаблона на John Papa за Visual Studio от Eric Panorel тук: http://ericpanorel.net/blog/hot-towel-spa-master-detail-scenario.

Накратко, можете да се възползвате от маршрутизирането в Durandal и ще изглежда нещо подобно:

master.js ще изложи набор от елементи:

define(function() {
  var self = this;

  this.items = ko.observableArray([]);

  var activate = function() {
     // ... get your items
     self.items([ { id: 0, name: 'Item 1' }, { id: 1, name: 'Item 2' }]);
  }

  return {
    // some properties and ...
    activate: activate
  }
});

master.html ще ги свърже и ще ги свърже към детайлен изглед:

<section data-bind="foreach: items">
   <a data-bind="text: name, attr: { href: '#/item/' + id() }"></a>
</section>

Сега всичко, което остава, е да използвате параметъра за данни за маршрута, за да изтеглите идентификатора в детайлния изгледмодел, detail.js:

define(function() {
  var self = this;

  this.name = ko.observable();

  var activate = function(routeData) {
     var itemId = routeData.id;

     // ... get your item details
     // var details = ...

     self.name(details.name);
  }

  return {
    // some properties and ...
    activate: activate
  }
});

И накрая, ще трябва да посочите маршрута във вашия main.js:

define(['durandal/app', 'durandal/viewLocator', 'durandal/system', 'durandal/plugins/router'],
function(app, viewLocator, system, router) {

    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");

    app.title = 'Durandal app';
    app.start().then(function() {
        toastr.options.positionClass = 'toast-bottom-right';
        toastr.options.backgroundpositionClass = 'toast-bottom-right';

        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        //configure routing
        router.useConvention();
        router.mapRoute('item/:id', 'viewmodels/item', 'Item', false);

        app.adaptToDevice();

        //Show the app by setting the root view model for our application with a transition.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

И ето го!

person Michael Teper    schedule 04.05.2013

arrow_upward
0
arrow_downward

Мисля, че е възможно да се предаде всеки основен обект, както правим с модалното извикване. ko.compose е пасивен; с рутер Durandal можете да пренасяте данните си до където пожелаете. Разгледайте моето заобиколно решение в този отговор и помощ за изпълнение.

person M.Ouedraogo    schedule 10.05.2013