Producers

Producers

This documentation refers to the properties and methods of this interface as accessed only through the "data-bind" html attribute used for interface theming. For information on how to access this interface and its properties using standard javascript code, have a look at our developer documentation.

The producers data-bind accessor will give you access to any producer data that is associated with the app. For example, if any of the playlists that feed into the app are limited to specific producers, then information about those producer's profiles will be available in the app via this accessor. We'll run through all of its properties to see what data is available and the ways you can use it.

Note: Flex will not process your "data-bind" attributes automatically. Refer to the security implications section of our theming guide for more information on how to enable and use the "data-bind" attribute safely on your website.

Sandbox

Open SandboxWant to get hands on with the flex framework? Use any of the html examples from this guide in our sandbox!

Producers List: producers.list() Array

This property is an array list of all the producers loaded by the app and their associated information. It can be used to build themed content around all of the producers who are associated with the application.


producers.list()[index] Object

Each array item is a producer object which contains the following properties about the producer.

Name: producers.list()[index].name String

This property contains the brand name of the producer. It is already html escaped by the framework.

Example:
<ul data-bind="foreach: producers.list()">
  <li>Producer Name: <span data-bind="html: name"></span></li>
</ul>

Tag Line: producers.list()[index].tagline String

This property contains the producer provided brand tagline (if applicable). It is already html escaped by the framework.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    Producer Name: <span data-bind="html: name"></span><br>
    Tagline: <span data-bind="html: tagline"></span>
  </li>
</ul>

Logo Banner: producers.list()[index].banner String

This property contains the URL to the location of the producers logo banner.

Example:
<ul data-bind="foreach: producers.list()">
  <li><img data-bind="attr: { src: banner, title: name }" /></li>
</ul>

Logo Thumbnail: producers.list()[index].banner_thumb String

This property contains the URL to the thumbnail version of the producers logo banner.

Example:
<ul data-bind="foreach: producers.list()">
  <li><img data-bind="attr: { src: banner_thumb, title: name }" /></li>
</ul>

Full Banners: producers.list()[index].banners Array

This property is an array which contains the url's to any custom full size promotional banners that the producer has uploaded.

producers.list()[index].banners[index] Object

Each array item is an object which contains information about the banner.

Title: producers.list()[index].banners[index].title String

This property contains the title of the banner (if provided by the producer).

Banner URL: producers.list()[index].banners[index].url String

This property contains the url to the banner.

Example:
<div data-bind="foreach: producers.list()">
  <h2 data-bind="html: name"></h2>
  <ul data-bind="foreach: banners">
    <li><img data-bind="attr: { src: url, title: title }" /></li>
  </ul>
</div>

Bio / Description: producers.list()[index].description String

This property contains the producer provided bio or brand description. It is provided in html format by the framework.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <h4 data-bind="html: name"></h4>
    <div data-bind="html: description"></div>
  </li>
</ul>

Total Beats: producers.list()[index].total_beats Integer

This property contains the total amount of beats which are published and available for licensing in the producer's catalog.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <span data-bind="html: name"></span>:
    <span data-bind="text: total_beats + ' Beats'"></span>
  </li>
</ul>

Total Discounts: producers.list()[index].total_discounts Integer

This property contains the total amount of public facing discounts/offers which are available through the producer.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <span data-bind="html: name"></span>:
    <span data-bind="text: total_discounts + ' Discounts'"></span>
  </li>
</ul>

Total Trackouts: producers.list()[index].total_trackouts Integer

This property contains the total amount of beats in the producer's catalog which have trackout delivery options built-in.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <span data-bind="html: name"></span>:
    <span data-bind="text: total_trackouts + ' Trackouts'"></span>
  </li>
</ul>

Chart Rank: producers.list()[index].chart_rank Integer

This property contains the rank of the producer's highest ranking beat from the main Beat Brokerz chart.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <span data-bind="html: name"></span> -  
    <span data-bind="text: 'Top Ranked Beat: #' + chart_rank"></span>
  </li>
</ul>

Producer Rank: producers.list()[index].producer_rank Integer

This property contains the rank of the producer in the Beat Brokerz marketplace.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <span data-bind="html: name"></span> -  
    <span data-bind="text: 'Producer Rank: #' + producer_rank"></span>
  </li>
</ul>

Discounts: producers.list()[index].discounts Array

This property is an array of discount objects which represent the public facing discounts/offers available by the producer.

Example:
<div data-bind="foreach: producers.list()">
  <h2 data-bind="html: name"></h2>
  <ul data-bind="foreach: discounts">
    <li>Special Offer: <span data-bind="html: name"></span></li>
  </ul>
</div>

Social Links: producers.list()[index].sociallinks Array

This property is an array of social connections available for the producer.


producers.list()[index].sociallinks[index] Object

Each array item is an object which contains information about the social connection.

Title: producers.list()[index].sociallinks[index].title String

This property contains the title of the social connection.

Link: producers.list()[index].sociallinks[index].url String

This property contains the url to the social page associated with the connection.

Class: producers.list()[index].sociallinks[index].icon String

This property contains a value which can be used as an id or class name to the connection for theming purposes.

Example:
<div data-bind="foreach: producers.list()">
  <h2 data-bind="html: name"></h2>
  <ul data-bind="foreach: sociallinks">
    <li><a data-bind="attr: { href: url }, text: title, css: icon"></a></li>
  </ul>
</div>

Badges: producers.list()[index].badges Array

This property contains an array of achievement badges which have been earned by the producer.

producers.list()[index].badges[index] Object

Each array item is an object which contains information about the award/achievement.

Name: producers.list()[index].badges[index].name String

This property contains the name of the achievement.

Image: producers.list()[index].badges[index].image String

This property contains the url to the badge image.

Description: producers.list()[index].badges[index].description String

This property contains a description of the achievement.

Example:
<div data-bind="foreach: producers.list()">
  <h2 data-bind="html: name"></h2>
  <ul data-bind="foreach: badges">
    <li>
      <h4 data-bind="text: name"></h4>
      <img data-bind="attr: { src: image }" />
      <p data-bind="text: description"></p>
    </li>
  </ul>
</div>

Average Vote: producers.list()[index].avg_vote String

This property contains the average overall rating given to all of the producer's combined catalog beats.

Example:
<ul data-bind="foreach: producers.list()">
  <li>
    <span data-bind="html: name"></span> -  
    <span data-bind="text: 'Average Rating: ' + avg_vote"></span>
  </li>
</ul>

Producer ID: producers.list()[index].uid String

This property contains the unique producer id.

Producer Info (by ID): producers.byId()[id] Object

This property will give you access to a specific producer object by using the producer id as a key. It is most useful to access information for a producer while inside of a different context.

Example:
<div data-bind="foreach: music.playlistKeys()">
  <!-- ko with: $root.music.playlists[$data] -->
  <div data-bind="if: producers.length">
    <h4>Featured Producers</h4>
    <ul data-bind="foreach: producers">
      <!-- ko with: $root.producers.byId()[$data] -->
      <li><span data-bind="text: name"></span></li>
      <!-- /ko -->
    </ul>
  </div>
  <!-- /ko -->
</div>

In the example above, we are cycling through each of the playlists in the app, and then using the "with" binding to switch to the context of that playlist. We then use an "if" binding to check if the playlist has any producers associated with it, and if it does, we cycle through them with another "foreach" binding. While cycling through each of the producer id's associated with the playlist, we use yet another "with" binding to switch into the context of that particular producer in order to display their name.