백본 뷰 렌더링이 생성되지 않음

백본으로 시작한 후 몇 시간 만 지나도 뷰 렌더링이 제대로 작동하지 않을 수 있습니다. 적절한 모든 JavaScript 파일을 HTML에 포함 시켰습니다. -하지만 여전히) 앱 조회에서 렌더링 출력 중 하나를 표시하지백본 뷰 렌더링이 생성되지 않음

(function($) { 
// MODELS 
var Paper = Backbone.Model.extend ({ 
    defaults : { 
     title : null, 
     author: null, 
    } 
}); 

// COLLECTIONS 
var PaperCollection = Backbone.Collection.extend({ 
    model : Paper, 
    initialize : function() { 
     console.log("We've created our collection"); 
    } 
}); 

// VIEWS 
var PaperView = Backbone.View.extend({ 
    tagName:'li', 
    className: 'resultTable', 
    events: { 
     'click .ptitle':'handleClick' 
    }, 

    initialize: function() { 
     _.bindAll(this, 'render', 'handleClick'); 
    }, 

    render: function() { 
     $(this.el).html('<td>'+this.model.get('title')+'</td>'); 
     return this; // for chainable calls 
    }, 

    handleClick: function() { 
     alert('Been clicked'); 
    } 
}); 


var ListView = Backbone.View.extend({ 
    events: { 
    //"keypress #new-todo": "createOnEnter", 
}, 

    initialize : function() { 
     console.log('Created my app view'); 
     _.bindAll(this, 'render', 'addOne', 'appendOne'); 

     this.collection = new PaperCollection(); 
     this.collection.bind('add', this.appendOne); // collection event binder 

     this.counter = 0; 
     this.render(); 
    }, 

    render : function() { 
     console.log('Render app view'); 
     $(this.el).append("<button id='add'>Add list item</button>"); 
     $(this.el).append("<p>More text</p>"); 
    // $(this.el).append("<ul></ul>"); 

    /* 
     _(this.collection.models).each(function(item){  // in case collection is not empty 
    appendOne(item); 
    }, this); */ 
    }, 

    addOne: function() { 
    this.counter++; 
    var p = new Paper(); 
    p.set({ 
    title: "My title: " + this.counter // modify item defaults 
    }); 
    this.collection.add(p); 
    }, 

    appendOne: function(p) { 
    var paperView = new PaperView({ 
    model: p 
    }); 
    $('ul', this.el).append(paperView.render().el); 
} 
}); 

var App = new ListView({el: $('paper_list') }); 
// App.addOne(); 

})(jQuery);

참고 FF에 콘솔에서 오류를받지 : 여기 내 스크립트입니다. 어떤 도움을 주시면 감사하겠습니다. 간단한 HTML :

<body> 
    <div class="container_16"> 


     <div class="grid_16"> 
      <div id="paper_list"> 
       Text... 

       <ul class="thelist"></ul> 
      </div> 
     </div> 
     <div class="clear"></div> 
    </div> 
</body>

출처

2011-11-23 Chris

6 행에 구문 오류가 있습니다.이를 수정하려면 쉼표를 제거하십시오. –

구문 오류가 아닙니다. 유효합니다. –

어느'console.log's가 보입니까? 내가 처음 보는 문제는'el' 매개 변수를 잘못 전달하고 있다는 것입니다. 당신은 정말로'# paper_list' (문자열 만,보기는 jQuery 노드를 사용합니다)를 전달하려고합니다. '# ('paper_list')'는 HTML의 어느 곳에서나 발견 된 요소가 아닙니다. –

이 적어도리스트 뷰를 렌더링 얻을 것이다 ...

// MODELS 
var Paper = Backbone.Model.extend ({ 
    defaults : { 
     title : null, 
     author: null, 
    } 
}); 

// COLLECTIONS 
var PaperCollection = Backbone.Collection.extend({ 
    model : Paper, 
    initialize : function() { 
     console.log("We've created our collection"); 
    } 
}); 

// VIEWS 
var PaperView = Backbone.View.extend({ 
    tagName:'li', 
    className: 'resultTable', 
    events: { 
     'click .ptitle':'handleClick' 
    }, 

    initialize: function() { 
     _.bindAll(this, 'render', 'handleClick'); 
    }, 

    render: function() { 
     $(this.el).html('<td>'+this.model.get('title')+'</td>'); 
     return this; // for chainable calls 
    }, 

    handleClick: function() { 
     alert('Been clicked'); 
    } 
}); 


var ListView = Backbone.View.extend({ 
    el: '#paper_list', 

    events: { 
     "click #add": "createOnEnter", 
    }, 

    initialize : function() { 
     console.log('Created my app view'); 
     _.bindAll(this, 'render', 'addOne', 'appendOne'); 

     this.collection = new PaperCollection(); 
     this.collection.bind('add', this.appendOne); // collection event binder 

     this.counter = 0; 
     this.render(); 
    }, 

    render : function() { 
     console.log(this); 
     $(this.el).append("<button id='add'>Add list item</button>"); 
     $(this.el).append("<p>More text</p>"); 
    // $(this.el).append("<ul></ul>"); 

    /* 
     _(this.collection.models).each(function(item){  // in case collection is not empty 
    appendOne(item); 
    }, this); */ 
    }, 

    addOne: function() { 
     this.counter++; 
     var p = new Paper(); 
     p.set({ 
      title: "My title: " + this.counter // modify item defaults 
     }); 
     this.collection.add(p); 
    }, 

    appendOne: function(p) { 
     var paperView = new PaperView({ 
      model: p 
     }); 
     $('ul', this.el).append(paperView.render().el); 
    } 
}); 


$(function(){ 
    var App = new ListView(); 
});

몇 가지 ... 첫째, 은 내가 document.ready의 내부에있는 ListView를 초기화 DOM이 준비가되었는지 확인하기 위해 두 번째로 목록 뷰에서 엘을 간단하게 만들었습니다. #paper_list 그러면 $ (this.el)을 나중에 할 수 있습니다.

나는 적어도 버튼과 "더 많은 텍스트"가 나타났습니다 ... 그게 도움이되는지 알려주세요!

출처

2011-11-23 04:01:02 jcreamer898

백본 뷰 렌더링이 생성되지 않음

답변

관련 문제