KnockoutJs и Asp.Net MVC 4 - изменение модели просмотра зависит от выбранного типа

Я работаю с MVC 4 и KnockoutJs, и я застрял в этом сценарии.

У меня есть объект (называемый родительским), у которого есть свойство с именем ChildType.

_ Если ChildType = 1 ---> Я буду визуализировать Partial-A с ViewModel-A
_ Если ChildType = 2 ---> Я буду визуализировать Partial-B с ViewModel-B

Я нашел не так много статей или ответов на мою проблему. Чаще всего предлагают master ViewModel, как-то так лучше, но если у нас больше 2-х child-viewmodel, значит мастер viewmodel такой большой.

Так что, пожалуйста, помогите мне реализовать это.

С уважением..


asp.net-mvc knockout.js knockout-mvc
person Cu Hoang Kim    schedule 10.12.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Используйте привязку шаблона

<!-- ko template: { name: childTemplate, data: childModel } -->
<!-- /ko -->

childTemplate — это наблюдаемый объект, либо вычисляемый, либо стандартный наблюдаемый объект, который возвращает строку с именем шаблона для отображения. childModel наблюдаемая или вычисляемая, которая вернет выбранную дочернюю модель

Также, если childModel может быть нулевым, вам нужно добавить проверку if в привязку шаблона, иначе вы получите нулевую ошибку.

<!-- ko template: { name: childTemplate, data: childModel, if: childModel } -->
<!-- /ko -->
person Anders    schedule 11.12.2012

arrow_upward
0
arrow_downward

Используйте привязку шаблона:

 <!-- ko template: { name: templateName, data: modelName, if: modelName } -->
 <!-- /ko -->

Затем в вашей модели представления добавьте следующие наблюдаемые: templateName и modelName.

Ваша модель представления, вероятно, будет выглядеть так:

var parent = {
    ChildType: ko.observable(1),
    templateName: ko.observable('Partial-A'),
    modelName: ko.observable(ViewModelA)
};

Следующее, что нужно сделать, это установить templateName и modelName в соответствии со значениями ChildType.

var option = parent.ChildType();

if(option == 1)
{
      parent.modelName(null);
      parent.templateName('Partial-A');
      parent.modelName(ViewModelA);
 }

Очень важно установить для modelName значение null перед изменением имени шаблона, потому что ko не сможет применять привязки.

Затем вы просто определяете свой шаблон, например:

<script id="Partial-A" type="text/html">  
 // your code goes here
</script>
person deea peace    schedule 24.01.2013