3

I have a view with a list of data, and I use backbone stickit for model binding.

If data is not available I don't want to display the list element, but if data is available I need to format it, thus I've tried the following binding:

'.emailItem': {
  observe: 'emailAddress',
  visible: function(viewVal, modelVal){ return !!modelVal; },
  onGet: function (val) {
    return '<span>E-mail</span><strong><a href="mailto:' + val + '">' + val + '</a></strong>';
  },
  updateMethod: 'html'
},

.emailItem matches the element <li class="emailItem"></li>.

When I run this, the list element is displayed correctly, but result from onGet is not inserted into the view. How can I use a combination of the visible attribute with customer formatting in stickit?

Jørgen
  • 8,820
  • 9
  • 47
  • 67
  • Are you sure the `onGet` callback is executed? The code looks right assuming you've got a view for each item in your list (so that the class binding matched the `li` element). – WiredPrairie Feb 20 '13 at 13:11
  • I don't have a view for each list item, but that shouldn't be necessary as the element is bound with the selector `.emailItem` and model attribute `emailAddress`? onGet is excecuted once, as the function's output is sent into the visible function as the viewVal parameter, I guess. – Jørgen Feb 20 '13 at 13:42
  • Ah -- I thought it was in a list of email items because of the `li` element. Have you tried an experiment of using an `id` attribute and `#emailItem` as the binding selector? – WiredPrairie Feb 20 '13 at 17:29
  • Not, but that shouldn't matter? I have verified that the selector matches the correct single element. – Jørgen Feb 20 '13 at 18:32
  • I don't know that it would matter. I just was trying to simplify it (as all of their examples use ID based selectors). – WiredPrairie Feb 20 '13 at 19:55

2 Answers2

1

I have found a solution:

'.emailItem': {
    observe: 'emailAddress',
    visible: true,
    visibleFn: function ($el, isVisible, modelAttr) {
        var value = this.model.get(modelAttr);
        $el.html('<span>Email</span><strong><a href="mailto:' + value + '">' + value + '</a></strong>');
    }
}

This works fine, but this is not the way visibleFn is supposed to be used. Please let me know if there are better ways of doing this.

Jørgen
  • 8,820
  • 9
  • 47
  • 67
1

What version of Stickit are you using?

I ask because I think this issue might be fixed on master. Can you try the following:

stickit master

If it does not work, please open an issue on github - I am very active there and will get to the bottom of this.

create new issue

user2095627
  • 362
  • 3
  • 7