почему backbone.js добавляет это к ul, а не к li - PullRequest
Новая
       32

почему backbone.js добавляет это к ul, а не к li

0 голосов
/ 16 января 2012

У меня есть неупорядоченный список, и я пытаюсь добавить несколько ссылок на одну из позиций.

Я также пытаюсь соединить ссылки на каждую из позиций, и каждую из ссылок, которые я размещаю внутри позиций, следуя примерам утерянных техников. http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/

Я вызываю одно представление к другому, чтобы модели оставались подключенными к ссылкам.

Что я не могу понять, так это добавить this.el к результатам моего ItemMatch представления, так почему же мой html должен закончиться 

<ul>
   <li>
      list-item called this.el
   </li>
   <a href="#">
      first item
   </a>
  <a href="#">
      second item
   </a>
     <a href="#">
      third item
   </a>
</>

MyApp.Views.ItemList = Backbone.View.extend({
    tagname: 'li',
    classname:'item_list',
    ...

    render_item_match: function(model){
            var item_match = new MyApp.Views.ItemMatch({model:model});
        $(this.el).append(item_match.el);
        }


});

MyApp.Views.ItemMatch = Backbone.View.extend({
    tagname: 'a',
    classname: 'item_match_result',

    initialize: function(){
        _.bindAll(this,"item_match_result");
        this.render();
    },


    events : {
        "click a.item_result": "item_match_result"
    },

    render : function(){
        this.el = HandlebarsTemplates['items/itemSearchResultItem'](this.model.attributes);

    },

    item_match_result: function(){
     console.log(this);
    }
});


})

1 Ответ

2 голосов
/ 16 января 2012

tagname и classname?Попробуйте использовать tagName и className

Примерно так работает нормально: 

MyApp = {Views:{}};
MyApp.Views.ItemList = Backbone.View.extend({
    tagName: 'li',
    className:'item_list',
    //....
    initialize : function() {
        $('body').append($('<ul></ul>'))
        this.render();
    },
    render: function(){
        $('ul').append($(this.el));
    this.render_item_match();
    },
    render_item_match: function(model){
        var item_match = new MyApp.Views.ItemMatch({model:model});
        $(this.el).append(item_match.el);
    }
});

MyApp.Views.ItemMatch = Backbone.View.extend({
    tagName: 'a',
    className: 'item_match_result',
    initialize: function(){
        _.bindAll(this,"item_match_result");
        this.render();
    },
    events : {
        "click a.item_result": "item_match_result"
    },
    render : function(){
        this.el = _.template('<a href="#">testLink</a>');

    },
    item_match_result: function(){
        console.log(this);
    }
});

new MyApp.Views.ItemList();

Вывод:

<ul><li class="item_list"><a href="#">testLink</a></li></ul>

...