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

Question

Вопрос: Возможно ли иметь разные виды для модели, основанные на значении, которое оно имеет для поля?

Объяснение: У меня есть модель с Настройки и Тип поля в нем. Установки могут быть разными параметрами, основанными на типе. Я хотел бы отключить представление настроек, основанное на значении Тип.

У меня есть небольшой опыт работы с нокаутом, и я хотел бы, чтобы это масштабируемо для разных типов.

Я попытался использовать ko.computedObservable с оператором switch, чтобы вернуть функцию(), которая определяет настройки в ней; такие как:

self.Settings = ko.computed(function() { 

    switch (self.Type()) { 

     case "Type1": 

      return new Type1(model.Settings); 

     case "Type2": 

      return new Type2(model.Settings); 
    } 

}); 

Тип1 и Type2 являются функциями с уникальными настройками для каждого типа модели. Это провалилось ужасно.

Возможно, я просто буду усложнять проблему, поэтому вторая пара глаз и любые предложения будут фантастическими!

Спасибо заранее!

Answer 1

Рассмотрите возможность использования templates для разных видов. Поступая таким образом, вы можете использовать возможность dynamically выбрать, какой шаблон визуализируется на основе свойства вашей модели. Например, предполагается, что ваш ViewModel выглядит что-то вроде:

var vm = function() { 
    var self = this; 
    self.Settings = ko.computed(function() { 
     switch (self.Type()) { 
      case "Type1": 
       return new Type1(model.Settings); 

      case "Type2": 
       return new Type2(model.Settings); 
     } 
    }); 

    //Based on your example computed, we'll return a different template name 
    //for each object type you're returning 
    self.templateName = function(t) { 
     if (t instanceof Type1) 
      return "template_type1"; 
     if (t instanceof Type2) 
      return "template_type2"; 

     return "template_unknown"; 
    } 
}; 

Вашего главного взгляда затем связывается с вашей коллекцией, как обычно, но с template связывания использования функции, определенной на вашем ViewModel:

<div data-bind="template: { name: templateName, foreach: Settings }"></div> 

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

<script id="template_type1" type="text/html"> 
    <span data-bind="text: name"></span> 
</script> 
<script id="template_type2" type="text/html"> 
    <h3 data-bind="text: title"></h3> 
</script> 
<script id="template_unknown" type="text/html"> 
    <span>Unknown item type</span> 
</script>