BorisMoore / jsviews

Interactive data-driven views, MVVM and MVP, built on top of JsRender templates
http://www.jsviews.com/#jsviews
MIT License
855 stars 130 forks source link

data-link problem img-src #332

Closed dryaf closed 8 years ago

dryaf commented 8 years ago

Hi,

I have an array with objects (Name and ID) I want to make a simply image gallery.

and a Template

            <script id="slideImage" type="text/x-jsrender">
                    <div class="swiper-slide">
                        <div class="card">
                            <div class="card-block">
                                <h4 class="card-title">{^{:Name}}</h4>
                                <img class="card-img" data-link="src{'/timgs/t' + :ID + '.jpg' }"  />

simply linking it via

    template = $.templates("#slideImage");
    template.link(".swiper-wrapper", img_array);

I don't get an error, and the img-tag 's src attribute isn't set? so i don't get the images Am I missing something?

the rest works fine

dryaf commented 8 years ago

found the solution!

here it is if somebody stumbles in the same situation

    function GetImgUrl(value) {
      return '/timgs/t'+value+'.jpg';
    }
    var myHelpers = {imgurl: GetImgUrl};
    $.views.helpers(myHelpers);

and

 <img class="card-img" src="" data-link="src{:~imgurl(ID)}"  />
BorisMoore commented 8 years ago

The : has to precede the whole expression, right after the {: src{:some expression here}.

So this should also work:

<img class="card-img" data-link="src{:'/timgs/t' + ID + '.jpg' }"
dryaf commented 8 years ago

oh , nice. Thx

BorisMoore commented 8 years ago

The wrong syntax you had will now trigger an exception with a syntax error message - with fix in v0.9.72