Knockout JS - отображать шаблон на основе нажатой ссылки

Question

У меня есть одностраничное приложение с некоторыми макетированными данными. Я показываю неупорядоченный список. Список является вложенным. Когда вы щелкаете по элементу в списке в зависимости от того, по какому элементу щелкнули, он устанавливает два свойства в моей виртуальной машине: selectedLayer или selectedProgramme. Слой вложен в программу.

Когда щелкают по слою, я вызываю функцию, которая устанавливает "selectedProgramme" для родителя - все в порядке до этого момента. Теперь я хочу отображать различный контент в зависимости от типа слоя. У меня есть 3 шаблона, но я хочу показать один шаблон на основе значения "layerType" для "selectedLayer".

Надеюсь, это понятно - я поместил весь свой код в следующую JSFiddle: http://jsfiddle.net/AzVbR/9/

Обычно я не могу отобразить данные в моей скрипке, но, как вы можете видеть, у меня есть следующий HTML-код, чтобы определить тип слоя и затем каким-то образом использовать правильный шаблон:

<div id="layerDetails" data-bind="template: { name: $root.displayLayerType }">
</div>

Я попытался передать 2 параметра, программный объект и $ data, но я не был уверен, что делаю.

Любая помощь будет оценена.

РЕДАКТИРОВАТЬ: Изменено JS Fiddle Link с рабочим кодом, как рекомендовано.

Answer 1

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

this.displayLayerType = function() {
            if ( self.selectedLayer() ) {
                return self.selectedLayer().layerType.toLowerCase()+"-template";
            } else {
                return "error-template";
            }
    };

Но в вашем коде есть еще несколько ошибок. Чтобы это работало, вам нужно исправить ваши шаблоны, убрав скобки () для наблюдаемых. Вы не должны использовать их в HTML (есть исключение для оценки выражения).

<script type="text/html" id="treaty-template">
    <!-- ko with: $root.selectedLayer -->
    <h5 data-bind="text: LayerTitle"></h5>

    <p><!--ko text: layerType --><!--/ko--></p>
    <p>Treaty value: <span data-bind="text: treatyValueThing"></span></p>
    <!-- /ko -->
</script>

Вот работа с этими и другими изменениями: http://jsfiddle.net/AzVbR/11/ Я, вероятно, не должен удалять jquery, и это событие, готовое для DOM.

Ваша реализация передачи большего количества аргументов выполнена правильно и задокументирована в документации knockoutJS.

И есть проблема с настройкой selectedLayerType а также selectedLayer, Вы, вероятно, намереваетесь использовать первое для выбора шаблона, а второе - данные. Но вы устанавливаете один за другим, поэтому у knokoutjs иногда разные данные и разные имена шаблонов, основанные на selectedLayerType еще не обновлено или наоборот. Так что мой displayLayerType функция основана только на selectedLayer И его layerType имущество. Это чище и проще (меньше мест для ошибок), но если вам действительно нужно это по-своему, с двумя наблюдаемыми вы можете сделать это. Поиск тихого обновления наблюдаемых. Обновите один из них молча, а затем позвольте другому пузырить мутацию.