1

I am creating user views for my Backbone/rails application. I am attempting to add a new view:

/views/users/edit.js.coffee

class MosaikBackbone.Views.UsersEdit extends Backbone.View

  template: JST['users/edit']

  render: ->
    $(@el).html(@template())
    this 

The template is in /templates/users/edit.jst.eco

<h1>edit page</h1>

My router looks like this in /routers/users.js.coffee:

class MosaikBackbone.Routers.Users extends Backbone.Router
    routes:
        '': 'index'
        'users/:id': 'show'
        'users/edit/:id': 'update'

    initialize: ->
        @collection = new MosaikBackbone.Collections.Users()
        @collection.fetch()

    index: ->
        view = new MosaikBackbone.Views.UsersIndex(collection: @collection)
        $('#container').html(view.render().el)

    show: (id) ->
        alert "Entry #{id}"

    update: (id) ->
        editView = new MosaikBackbone.Views.UsersEdit()
        $('#container').html(editView.render().el)

The index views/templates work fine, and the view is being inserted into the container div. If I change the tagName for the UsersEdit view to 'li' I can see the li element in the DOM, it's just not being populated with the template. I'm guess it's a syntax issue but there are no errors in the console.

UPDATE: Just to clarify, the view is being appended to #container because i can see the empty element item, there is just an issue with rendering the template.

I refer to template: JST['users/index'] in my UsersIndex view and everything works fine. For some reason template: JST['users/edit'] isn't working even though both templates are in the same folder. Also, I can place invalid syntax in the edit template and no errors are thrown so it's not even being detected I dont' think

UPDATE 2: The following View/templates works without issue:

class MosaikBackbone.Views.UsersIndex extends Backbone.View

  template: JST['users/index']

  initialize: ->
    @collection.on('reset', @render, this)
    @collection.on('add', @appendUser, this)

  render: ->
    $(@el).html(@template())
    @collection.each(@appendUser)
    this

  appendUser: (user) ->
    view = new MosaikBackbone.Views.User(model: user)
    $('#users').append(view.render().el)

templates/users/index.jst.eco

h1>title here</h1>
<ul id="users"></ul>
kcurtin
  • 521
  • 1
  • 6
  • 18
  • It seems it should work. Have you tried to create `UserEdit` view and append to DOM manually? In the debug console, I mean. – theotheo Jun 05 '12 at 19:45
  • the view is appending to the DOM - it's just an empty div. For some reason the template just isn't being added. It looks like the problem is with `template: JST['users/edit']` as I can use invalid syntax in the template and no errors are thrown – kcurtin Jun 05 '12 at 20:43
  • So what does `JST['users/edit']` look like? And notable differences are there between the edit and index templates? – mu is too short Jun 05 '12 at 21:06
  • `JST['users/edit']` is included above, the `JST['users/index']` template is in the same folder: templates/users/filename.jst.eco and works without problems. Updating my question to include the working index View and Template – kcurtin Jun 05 '12 at 21:12
  • `console.log(JST['users/edit'])`? – theotheo Jun 05 '12 at 21:22
  • console.log outputs the content of the template file is it should. This is bizzare – kcurtin Jun 05 '12 at 21:31
  • And `console.log(@template())` inside `render` says what? – mu is too short Jun 05 '12 at 21:32
  • it looks like it is in there, here is the partial output from the console: __proto__: ctor constructor: function UsersEdit() { template: "

    the edit template should be working and this should show in console

    ↵↵" __proto__: Object
    – kcurtin Jun 05 '12 at 21:50
  • Is that comment `console.log(JST['users/edit'])` or `console.log(@template())` or something else? – mu is too short Jun 05 '12 at 22:24
  • 1
    I think we need to see this in action, you can start here if you want: http://jsfiddle.net/ambiguous/XTSwm/ – mu is too short Jun 06 '12 at 16:13
  • thanks - I will get started putting it together. That other comment came from an instance of the UsersEdit template's render function (I created a new one, assigned it to a var and the return value for the variable in the console output a bunch of info including what I pasted there) – kcurtin Jun 06 '12 at 22:41

0 Answers0