Компоненты нокаута внутри foreach и шаблоны

Question

Так что с введением компонентов и пользовательских элементов кажется намного проще инкапсулировать вашу логику и разметку, однако я немного не уверен, как использовать компоненты в разделах foreach, когда вам нужно передать в модель представления.

Итак, мой текущий сценарий состоит в том, что у меня есть модель представления, которая выглядит примерно так:

function SomePartialViewModel()
{
    this.Name = ko.observable();
    this.Score = ko.observable();
    this.SomeDate = ko.observable();
}

function SomeViewModel()
{
    this.DataFromWebServiceCall = ko.observableArray();

    this.GetDataFromServer = function(){
        // get some data from service and populate DataFromWebSeriviceCall with instances of SomePartialViewModel
    }
}

Теперь в приведенном выше примере у нас есть POJO для хранения частичных данных, и у нас есть модель основного представления для представления, которое будет связываться с веб-службой или чем-то еще и заполнять его массив экземплярами частичного представления. Тогда это в настоящее время будет использоваться так:

<div id="partial-data" data-bind="template: { name: 'partial-view', foreach: DataFromWebServiceCall }"></div>

<div class="partial-view">
    <label data-bind="text: Name"></label>
    <label data-bind="text: Score"></label>
    <label data-bind="text: SomeDate"></label>
</div>

Теперь предположим, что .partial-view находится в теге сценария с правильным именем шаблона и т. д. и является правильным шаблоном, то #partial-data находится в главном окне и хочет отобразить все экземпляры на странице. Сейчас все это работает, но я бы хотел перейти к модели, основанной на более компонентах, и в настоящее время мы видим, что шаблон опирается на данные SomePartialViewModel, поэтому у нас есть наш шаблон и наша модель представления для этого компонента, однако проблема заключается в том, что получение viewmodel в компонент, так как в данный момент вы регистрируете компонент во время установки, а затем используете params для заполнения его фрагментов. Однако в этом случае я хочу передать viewmodel компоненту во время привязки...

Поэтому мне было интересно, как я могу это сделать, так как я представляю, что могу зарегистрировать компонент с шаблоном, но без модели представления, но есть ли понятие data привязка стиля, где я могу установить $data свойство и перейти на foreach из привязки шаблона к представлению?

Надеюсь, что проблема, которую я пытаюсь решить, будет видна, и любая информация будет отличной.

Answer 1

Существует множество способов передачи значений и / или моделей представления компонентам с использованием params,

Если вы используете createViewModel Метод, вы можете просто передать viewmodel через параметры и использовать частичную viewmodel в качестве компонента viewmodel:

ko.components.register("partial-view", {
    viewModel: {
        createViewModel: function (params) {
            return params.value;
        }
    },
    template: "<div>Partial View for <b data-bind='text: Name'></b></div>"
});

Вы можете увидеть рабочий пример в этой скрипке: http://jsfiddle.net/Quango/fn1ymf9w/

Answer 2

Вы можете определить viewModels под viewModels:)

точно так же, как и для определения наблюдаемой, вы можете определить другую viewModel, а с помощью привязки "с" вы можете создать желаемую компонентную модель.

Сначала вы создаете свои компоненты и подкомпоненты, под-под-под-компоненты и т. Д. Отдельно.

var SomePartialViewModel = function()
{
    this.Name = ko.observable();
    this.Score = ko.observable();
    this.SomeDate = ko.observable();
}

var SomeViewModel = function()
{
    this.DataFromWebServiceCall = ko.observableArray();

    this.GetDataFromServer = function(){
        // get some data from service and populate DataFromWebSeriviceCall with instances of SomePartialViewModel
    }

    this.SPM = new SomePartialViewModel(); // partial-1
}

А затем вы создаете MainViewModel и привязываете все основные элементы здесь.

var MainViewModel =  function() {

    var self = this;

    self.SVM = new SomeViewModel();

    self.SPM = new SomePartialViewModel(); // partial-2
}
ko.applyBindings(new MainViewModel());

затем в своем html вы можете создавать свои компоненты, подчиняясь контексту, который вы создали для объектов с выбыванием

    ...

    <body>
    <div data-bind="with: SVM">
        ....
        <div data-bind="with: SPM">
            <!-- partial-1 data -->
        </div>
        ...
    </div>


    <div data-bind="with: SPM">
        <!-- partial-2 data -->
    </div>
    </body>
...

Возможно, вы захотите создать отдельные файлы для ваших компонентных моделей, и с помощью модульного загрузчика скриптов, такого как Require js, вы можете связать все вместе в законченное нокаутное веб-приложение на основе компонентов.