CODEWITHSUNDEEP
javascriptcoffeescriptbatman.js
Michael
Michael

Reputation: 1517

How to load a remote HTML remplate into a view using Batman.js

I'm trying to use Batman.js with on a framework that isn't Ruby on Rails. Right now, I've been able to render views while settings the HTML content directly into the view class, such as this:

class App.ContextMenuView extends Batman.View
  html: '<span>hello world</span>'

However, I've been completely unable to render a view using a remote HTML template. From what I've understood, it should be possible using the attribute 'source': however, nothing happens when I use this attribute.

Here's the full code of my very short application:

class window.App extends Batman.App
  @root   'home#index'
  @route  '/home', 'home#index"'

class App.HomeController extends Batman.Controller
  routingKey: 'home'

  index: (params) ->
    console.log 'poil'

class App.ContextMenuView extends Batman.View
  source: '_context_menu'

$(window).ready ->
  Batman.config.pathToHTML = '/templates' # The template can be found at //localhost/templates/_context_menu.html
  App.run()

Somewhere in the page's HTML, there's an element with a [data-view="ContextMenuView"] attribute, which is properly detected by Batman, the view is properly instantiated, but still: nothing happens.

There are no request made to the web server, the 'source' attribute seems to have been completely ignored... and nothing in the documentation gives anymore details on that topic.

What have I done wrong ?

EDIT:

For those interested, I worked around the issue by overloading Batman.View:

class App.View extends Batman.View
  @template_cache: {}

  constructor: ->
    super
    @template_cache = App.View.template_cache
    @update_source()
    @observe 'source', (@update_source.bind @)

  update_source: ->
    @get_template_from_source() if @source?

  get_template_from_source: () ->
    if @use_cache and @template_cache[@source]?
      @set 'html', @template_cache[@source]
    else
      @fetch_template()

  fetch_template: () ->
    $.ajax {
        async:    not QUnit? # async should be false in the test environment
        dataType: 'html'
        url:      "#{Batman.config.pathToHTML}/#{@source}.html"
        success:  (@template_received.bind @)
        error:    (error) => console.log "Could not load template '#{@source}'", error
      }

  template_received: (html) ->
    @set 'html', html
    @template_cache[@source] = html if @use_cache

Upvotes: 2

Views: 85

Answers (1)

rmosolgo
rmosolgo

Reputation: 1874

Are other AJAX requests going through ok? If not, might need to include a "platform adapter", which is a bunch of code that implements AJAX & DOM functions for Batman.js. You'll find adapters in the bundled files on the download page:

  • "jQuery adapter" depends on jQuery uses $.ajax and $(...) to implement those functions
  • "solo adapter" uses zest.js and reqwest.js to implement those functions

Here's another question about Batman.js & jquery: Using jQuery with Batman.js

Does that help at all?

(If so, it's the nail in the coffin -- we've been thinking about just making batman.js depend on jQuery and removing that "level of abstraction" :S )

Upvotes: 0

Related Questions