Представление существующего HTML в виде структур данных Backbone.js в CoffeeScript - PullRequest
Новая
       1

Представление существующего HTML в виде структур данных Backbone.js в CoffeeScript

0 голосов
/ 03 ноября 2011

Я с трудом справляюсь с этим.

У меня есть список HTML, и я хочу использовать Backbone.js для обработки событий в этих элементах списка. Вот что у меня так далеко. Это упрощенный сценарий, помогающий мне лучше понять, как структурировать более крупное приложение. В моем примере я просто хочу внедрить существующий список HTML в структуру Backbone и обрабатывать события щелчка через представление Backbone.

Я получаю сообщение об ошибке, связанное с использованием @model в представлении, но я вполне уверен, что здесь я не понимаю концептуально.

CoffeeScript: 

$ ->
    class Item extends Backbone.Model
        name: null

    class ItemList extends Backbone.Collection
        model: Item

    class ItemView extends Backbone.View
        tagName: 'li'

        initialize: =>
            @model.bind('change', this.render)
            @model.view = this

        events:
            'click' : 'clicked'

        clicked: -> 
            console.log 'clicked'

        render: =>
            this

    class ItemListView extends Backbone.View
        el: $('ul#test')

        initialize: =>
            $('li', @el).each(@addItem)

        addItem: (item) ->
            item = new ItemView({ el: item })

        render: =>
            this

    Items = new ItemListView

HTML: 

<ul id="test">
    <li>Hi thar</li>
    <li>Yeah</li>
    <li>OK</li>
</ul>

Вот jsfiddle, который я начал раньше: http://jsfiddle.net/Saxx4/

1 Ответ

2 голосов
/ 03 ноября 2011

Мне никогда не нравился CoffeeScript (Javascript настолько хорош, зачем его заменять?), Но, похоже, здесь есть несколько проблем:

  • Вы получаете сообщение об ошибке@model потому что вы никогда не устанавливаете его на ItemView.Это не происходит автоматически - вы должны либо создать экземпляр модели представления в initialize(), либо передать ее в конструктор, например: 

    addItem: (item) ->
    model = new ItemView({ 
        el: item, 
        model: new Item({ 
            // assuming you might want the list item text
            // in the model data
            text: $(item).text() 
        }) 
    })

  • Обычно вы просто хотите указатьселектор в el, а не объект jQuery - в противном случае DOM может быть не готов при загрузке кода Backbone: el: '#test'

  • Вам необходимо передать объект параметров в ItemListView конструктор, а не просто один аргумент, независимо от того, что вы делаете в initialize(): 

    class ItemListView extends Backbone.View

    initialize: (opts) =>
        opts.items.each(@addItem)

    // ...

Items = new ItemListView({ items: $('ul#test li') })
...