Реализация меню в нокауте - переключение между представлениями с разными viewModels

Question

По сути, я пытаюсь реализовать чрезвычайно простой шаблонный коммутатор RobN http://jsfiddle.net/rniemeyer/XYz8M/, который использует привязку данных «шаблон».

(---SO wants code here - see fiddle for complete code---) 
    <div id="templateContent" data-bind='template: { name: currentView() }'></div> 

    var viewModel = { 
     currentView: ko.observable("template-1"), 
     toggleView: function() { 
     this.currentView(this.currentView() === "template-1" ? "template-2" : "template-1"); 
    } 
    }; 

    ko.applyBindings(viewModel); 

Я видел много других простых примеров делают это и все используют один и тот же класс ViewModel для каждого загруженного шаблона. Исключение - приложение SamplePresentation от RobN (у меня недостаточно точек повторения для публикации другой ссылки), в то время как очень впечатляюще, мне было трудно связаться с моим опытом ноу-коу. Я думаю, что он делает это в своем методе section.activate(), но мне это непонятно.

Я хочу использовать эту концепцию в реальном приложении, но имея связанные проблемы контекста. Вот что я пытаюсь сделать: http://jsfiddle.net/jockor/DSEDh/4/

This line intentionally left blank (please see fiddle vs. mangling code here) 

В основном при нажатии кнопки/нав ссылку я просто хочу поменять панель содержимого тела с другим шаблоном. Этот шаблон будет нуждаться в собственных данных, поддерживаемых собственной моделью viewModel.

Скриншот выше - это мой вариант упрощенной версии этой концепции - просто попытка переключаться между панелями «Кошки и собаки». Я столкнулся с тем, что данные, привязанные к привязке данных к шаблону, используются для загруженных шаблонов cat/dog.

Может кто-нибудь сказать мне, правильно ли я делаю это, или если я злоупотребляю концепцией привязки шаблона?

Answer 1

Я изменил свой jsfiddle работать:

http://jsfiddle.net/5rmAL/2/

Что вам нужно было переключить data поле шаблона связывания, а также. Вы только переключали имя шаблона, и я мог видеть из вашего кода, что вы искали способ изменить данные модели представления. Итак, я грубо реализовал его, чтобы он переключил данные из viewModel в viewModel, когда он переключает имя. Есть более элегантные способы сделать это, но jsfiddle был предназначен только для демонстрации.

С помощью изменения data вы можете изменить то, на что указывает шаблон, для извлечения его данных. Сделав это наблюдаемым, я смог получить данные, которые он указывает на переключатель. В моей быстрой грубой реализации используется простой объект, который содержит как имя шаблона, так и данные внутри наблюдаемого. Поскольку имя шаблона и данные должны переключаться одновременно, я обновляю значения в объекте внутри наблюдаемого, а затем вручную скажу наблюдаемому, что его значение изменилось. Если вы измените данные перед именем шаблона, он попытается привязать предыдущий шаблон. Точно так же, если вы измените имя перед данными, оно попытается привязать старые данные к новому шаблону. Таким образом, чтобы сделать это без его взрыва, чтобы не находить переменные и прочее при повторной привязке шаблона, вам нужно как-то убедиться, что ваша привязка template не обновляется до того, как вы закончите изменять имя шаблона и данные для указания.

EDIT: Я заметил, что у вас был обработчик функций в ваших привязках к нокауту, который передавал $ data в качестве первого аргумента функции. Нокаут всегда передает $ data в качестве первого аргумента функции в первую очередь, поэтому я заменил function() { ....goto($data); } на ....goto (... = материал). Это всего лишь вид бокового узла (и даже не потребовал каких-либо изменений в вашей сигнатуре функции).