Knockout templates with same name and different templateUrl

Question

I have the following problem.

I have two templates with the same names that constitute a editable and a readonly variant of the same template.

Two different places in my html (that is created dynamically, but it is this condition that gives me the problem) I use the template binding, and I want to bind to each of these.

The first one will then look like this:

<div data-bind="template: {name: 'myTemplate', data: $data, templateUrl: '/Templates/readonly/' }"></div>

And the second one looks like this

<div data-bind="template: {name: 'myTemplate', data: $data, templateUrl: '/Templates/editable/' }"></div>

The problem is that when I get to the second template binding, knockout will reuse the first template since it has the same name , and that will make both templates readonly.

So are there any way to make knockout download the second template if it resides in another location that the other one, or are there no way around having unique names on all of the templates.

Given the current logic, it will be a lot of work to change that, so I'm hoping that it can be done through the binding instead of renaming.

EDIT

I'm using the External Template Engine found here.

are you using this? github.com/ifandelse/Knockout.js-External-Template-Engine — pax162
@pax162 - Yes I am. Should have written that in the question as well. Will update it now. — Øyvind Bråthen
If you can change your viewModel and get rid of the quotes around myTemplate, a quick fix would be to actually replace myTemplate with a function which returns different names. knockoutjs.com/documentation/… — pax162

Øyvind Bråthen Øyvind Bråthen · Accepted Answer · 2013-10-25T11:52:31

It seems that as long as the name is unique it will fetch it again (even if that will result in the same url.

So changing them to

<div data-bind="template: {name: 'readonly/myTemplate', data: $data, templateUrl: '/Templates/' }"></div>

<div data-bind="template: {name: 'editable/myTemplate', data: $data, templateUrl: '/Templates/' }"></div>

Made it work as I hoped, with no changes on the server side :)

Thanks to @pax162 for putting me on the correct track!

Knockout templates with same name and different templateUrl

1 Answers