Fixed KnockoutJS template that wont work #50

Closed
wants to merge 1 commit into
from

Projects

None yet

2 participants

@budiadiono
Contributor

Hi Rob,

I've been using knockoutJS template inside composite view and its not working. On the browser console keep saying "Cannot find template with ID ...." Then I tried to fix it by append the element into body before bind it (on viewEngine.js) and its working fine -- I just thinking that KnockoutJS can't recognize script template if the element is never landing into body.

This workaround is has affect on modalDialog.js that will never appear anymore, because I hide it first to avoid showing element twice on activation, so I ensure that every child on modalDialog is always has style display:block.

Am I in correct path? Or this is actually bug? To reproduce the issue you can check my code on this branch: https://github.com/budiadiono/DurandalMovieApp/tree/TemplateProblem. That was modified code from Stephen Walther's blog post at http://stephenwalther.com/archive/2013/02/08/using-durandal-to-create-single-page-apps.aspx.

Thanks!
Budi

@EisenbergEffect
Member

You should not be using the ko template binding. Instead, use Durandal's compose binding. It is superior in every way :)

@budiadiono
Contributor

Ah, seems I got to more familiar with it :) Thanks for the clue Rob!

@EisenbergEffect
Member

No problem. I am going to add something in the docs I am working on about
that. Thanks!

On Wed, Feb 13, 2013 at 9:46 AM, Budi Adiono notifications@github.comwrote:

Ah, seems I got to more familiar with it :) Thanks for the clue Rob!


Reply to this email directly or view it on GitHubhttps://github.com/BlueSpire/Durandal/pull/50#issuecomment-13496775.

Rob Eisenberg,
Blue Spire Consulting, Inc.
Caliburn Project
850.264.3996

@budiadiono
Contributor

Hi Rob,

Nice! I just follow your suggestion to use compose binding. It's working but with an issue. Here's my attempt:
I tried this on movie.html:

<tbody data-bind="foreach:movies">
   <tr data-bind="compose:{view:'movies/movie-item'}"></tr>
</tbody>

where movies/movie-item is HTML file (movies/movie-item.html) with this contents:

<td data-bind="text:title"></td>
<td data-bind="text:director"></td>
<td><a data-bind="attr:{href:'#/movies/details/'+id}">Details</a></td>

And I got the result that template item is always surrounded by DIV tag of durandal-wrapper. So the results are unexpected:

<tbody data-bind="foreach:movies">
  <tr data-bind="compose:{view:'movies/movie-item'}">
    <div class="durandal-wrapper" data-view="views/movies/movie-item" data-active-view="true">
      <td data-bind="text:title">Star Wars</td>
      <td data-bind="text:director">Lucas</td>
      <td><a data-bind="attr:{href:'#/movies/details/'+id}" href="#/movies/details/0">Details</a></td>
    </div>
   </tr>
   <tr data-bind="compose:{view:'movies/movie-item'}">
     <div class="durandal-wrapper" data-view="views/movies/movie-item" data-active-view="true">    
       <td data-bind="text:title">King Kong</td>
       <td data-bind="text:director">Jackson</td>
       <td><a data-bind="attr:{href:'#/movies/details/'+id}" href="#/movies/details/1">Details</a></td>
     </div>
   </tr>
...
...
</tbody>

Is there any way to avoid that wrapper from being added? And I think it would be nice if there is a `foreach' settings belongs to compose binding - so we can do compose binding from TBODY instead of TR, something like this:

<tbody data-bind="compose: { foreach:movies, view:'movies/movie-item'">

What do you think?

I made the repro in here: https://github.com/budiadiono/DurandalMovieApp/tree/FixByComposeBinding/DurandalMovieApp.

Thanks in advance!

@EisenbergEffect
Member

Durandal requires views to have a single root element. I would recommend
that you move the tr into your view, then user a containerless compose
binding.

On Wed, Feb 13, 2013 at 11:53 AM, Budi Adiono notifications@github.comwrote:

Hi Rob,

Nice! I just follow your suggestion to use compose binding. It's working
but with an issue. Here's my attempt:
I tried this on movie.html:

where movies/movie-item is HTML file (movies/movie-item.html) with this
contents:

Details

And I got the result that template item is always surrounded by DIV tag of
durandal-wrapper. So the results are unexpected:

Star Wars Lucas Details
King Kong Jackson Details
... ...

Is there any way to avoid that wrapper from being added? And I think it
would be nice if there is a `foreach' settings belongs to compose binding -
so we can do compose binding from TBODY instead of TR, something like this:

What do you think?

I made the repro in here:
https://github.com/budiadiono/DurandalMovieApp/tree/FixByComposeBinding/DurandalMovieApp
.

Thanks in advance!


Reply to this email directly or view it on GitHubhttps://github.com/BlueSpire/Durandal/pull/50#issuecomment-13504248.

Rob Eisenberg,
Blue Spire Consulting, Inc.
Caliburn Project
850.264.3996

@budiadiono
Contributor

Ah I see it now -- I tried your solution, its working well! Now I feel
safety to forget about using native KnockoutJS template :)
Thanks again Rob! kudos for DurandalJS :)

On Thu, Feb 14, 2013 at 12:09 AM, Rob Eisenberg notifications@github.comwrote:

Durandal requires views to have a single root element. I would recommend
that you move the tr into your view, then user a containerless compose
binding.

On Wed, Feb 13, 2013 at 11:53 AM, Budi Adiono notifications@github.comwrote:

Hi Rob,

Nice! I just follow your suggestion to use compose binding. It's working
but with an issue. Here's my attempt:
I tried this on movie.html:

where movies/movie-item is HTML file (movies/movie-item.html) with this
contents:

Details

And I got the result that template item is always surrounded by DIV tag
of
durandal-wrapper. So the results are unexpected:

Star Wars Lucas Details
King Kong Jackson Details
... ...

Is there any way to avoid that wrapper from being added? And I think it
would be nice if there is a `foreach' settings belongs to compose
binding -
so we can do compose binding from TBODY instead of TR, something like
this:

What do you think?

I made the repro in here:

https://github.com/budiadiono/DurandalMovieApp/tree/FixByComposeBinding/DurandalMovieApp
.

Thanks in advance!


Reply to this email directly or view it on GitHub<
https://github.com/BlueSpire/Durandal/pull/50#issuecomment-13504248>.

Rob Eisenberg,
Blue Spire Consulting, Inc.
Caliburn Project
850.264.3996


Reply to this email directly or view it on GitHubhttps://github.com/BlueSpire/Durandal/pull/50#issuecomment-13505109.

Best Regards,
Budi

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment