Menu
I've been kicking the tyres of Backbone.js and having a play around in recent weeks, so a bit of a noob question...
What is the 'correct' way to define and use view helpers in backbone.js?
As far as I can work out, the only real place to define helpers to use in your templates is on the model or collection itself. However, when that helper is directly returning HTML, this begins to feel a little dirty.
Is there a better way?
627
The Backbone. js Views specify how your data looks like. They represent model's data to the users. They can be used with any JavaScript template library.
Backbone. Backbone has been around for a long time, but it's still under steady and regular development. It's a good choice if you want a flexible JavaScript framework with a simple model for representing data and getting it into views.
Helper functions are JavaScript functions that you can call from your template. Ember's template syntax limits what you can express to keep the structure of your application clear at a glance. When you need to compute something using JavaScript, you can use helper functions.
The Backbone.js Views specify how your data looks like. They represent model's data to the users. They can be used with any JavaScript template library. They handle users input events, bind events and methods, render model and collection and interact with users.
It is used to extend the Backbone.view class to create a custom view class. 2. It is used to instantiate the view by using new keyword. 3. It defines which element to be used as the view reference.
Any template engine can be used with backbone view. To understand the concept of templates, let us use the simple JavaScript style templates. Let's say that every book needs to be rendered as a drop down menu.
This model can either be a backbone model or a backbone collection. The view can extract the information from its model and render the HTML accordingly. Now we are saying that the views are responsible for listening to DOM element's events and also for updating the DOM elements.
There are a few different places that I put view helpers with Backbone.js:
If the helper is specific to a certain view, put it right in the view definition:
var MyView = Backbone.View.extend({ tagName: 'div', events: { ... }, initialize: function() { ... }, helperOne: function() { // Helper code }, anotherHelper: function() { // Helper code }, render: function() { ... this.helperOne() ... } }); If the helper will be used by all views, extend the Backbone View class so that all views inherit this function:
_.extend(Backbone.View.prototype, { helper: function() { // Helper code } } If you need more complicated sharing of helpers between views, have views extend each other:
var MyOtherView = MyView.extend({ // ... render: function() { ... this.helperOne() ... } }); I'm not sure what is best practice (or if there is an established best practice), but these patterns seem fairly clean and work well.
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
