Question

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?

Was it helpful?

Solution

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

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top