0

JS代码如下

模型

var EntryName = Backbone.Model.extend({
    defaults : {
        name : ""
    },
});

模型集合

var EntryNames = Backbone.Collection.extend({
    model : EntryName,
    initialize : function() {

    }
});

模型视图

var EntryNameView = Backbone.View.extend({
    tagName : 'li',
    // Cache the template function for a single item.
    entrynametpl : _.template('<li><a href="#" ></a></li>'),
    // Re-render.

渲染功能

    render : function() {
        this.$el.html(this.entrynametpl(this.model.toJSON()));
        return this;
    },

});

模型集合视图

var EntryNamesView = Backbone.View.extend({
    //      tagName: "ul",
    //      className: "nav-search",
    el : $('#entriestree'),
    initialize : function() {
        //this.template = _.template($('#entries-template').html());
        _.bindAll(this, 'render');
    },

渲染功能

        render : function() {
    var item, self = this;
    //var template = $("#item-template");
    this.collection.each(function(entry) {
        item = new EntryNameView({
            model : entry
        });
        self.$el.append(item.render().el);
    });
    console.log($(this.el));
    return this;
}    
});

模型集合

模型集合这是我调用渲染的位置和方式。

function onDeviceReady() 
        {  
//          console.log("Opening panel");
            $("#nav-panel").panel( "open");
            console.log("creating collection");
            var donuts = new EntryNames();
            donuts.reset([  {"name" : "Boston Cream"},  {"name" : "Lemon-Filled"},  {"name" : "Rusty Iron Shavings"}]);
            console.log("created collection");
            var donutCollectionView = new EntryNamesView({collection : donuts});
            donutCollectionView.render();
            $("#nav-panel" ).trigger( "updatelayout" );
        }

模型集合

HTML 代码位于模型集合下方

<body>
<div id="panel-fixed-page1" class="jqm-demos ui-responsive-panel"
    data-url="panel-fixed-page1" data-role="page">
    <div data-role="header" data-theme="f" data-position="fixed">
        <div data-role="navbar" data-grid="d">
            <ul>
                <li><a class="ui-btn-active" href="#" data-         theme="a">Entry</a></li>
                <li><a href="#" data-theme="a">Addresses</a></li>
                <li><a href="#" data-                               theme="a">Attachments</a></li>

             <li><a href="#" datatheme="a">Delivery Collection</a></li>
            </ul>
        </div>
        <!-- /navbar -->
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
    </div>
    <!-- /header -->
    <div class="jqm-content" data-role="content">
    </div>
    <!-- /content -->
    <div id="nav-panel" data-role="panel"
        data-position-fixed="true">
        <li><a href="#" data-rel="close" >INBOX</a></li>
        <ul id="entriestree" class="nav-search" data-role="listview" data-                      theme="a">
        </ul>
    </div>
</div>
      </body>

模型集合

模型集合

4

3 回答 3

1

在您的EntryNamesView.render,this中没有指向view，因为它在each回调函数范围内。尝试将其更改为使用self：

render : function() {
    var item, self = this;
    //var template = $("#item-template");
    this.collection.each(function(entry) {
        item = new EntryNameView({
            model : entry
        });
        self.$el.append(item.render().el);
    });
    console.log($(this.el));

    return this;
}
于 2013-04-12T21:44:17.343 回答
0

您的 _.underscore 模板没有占位符变量：

entrynametpl : _.template('<li><a href="#" ></a></li>') //renders empty li's

将此更正为：

entrynametpl: _.template('<li><a href="#"><%= name %></a></li>')
于 2013-04-12T23:12:03.677 回答
0

好的，我发现了问题，我在构造函数（初始化函数）之外设置了视图的元素“el”属性，因此它从未使用正确的 dom 元素进行设置，因为 dom 元素出现在 html 文件中的脚本引用之后. 一旦我将脚本导入移到页面末尾，瞧，生活是美好的……愚蠢的错误花费了您太多时间！

于 2013-04-14T17:46:22.950 回答