Jquery mobile 渲染调用后，Backbone.js视图未显示在浏览器中_Jquery Mobile_Backbone.js_Cordova_Backbone Views

Jquery mobile 渲染调用后，Backbone.js视图未显示在浏览器中

jquery-mobile backbone.js cordova

Jquery mobile 渲染调用后，Backbone.js视图未显示在浏览器中,jquery-mobile,backbone.js,cordova,backbone-views,Jquery Mobile,Backbone.js,Cordova,Backbone Views,下面是JS代码模型模型集 var EntryNames = Backbone.Collection.extend({ model : EntryName, initialize : function() { } }); <body> <div id="panel-fixed-page1" class="jqm-demos ui-responsive-panel" data-url="panel-fixed-page1" data-role

下面是JS代码

模型

模型集

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

    }
});

<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>

模型视图

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

ModelCollectionView

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() {
        this.$el.html(this.entrynametpl(this.model.toJSON()));
        return this;
    },

});

        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;
}    
});

模型集

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

    }
});

<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>

模型集合这是我调用render的位置和方式

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" );
        }

模型集

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

    }
});

<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>

HTML代码在模型集合下面

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

    }
});

<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>

模型集

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

    }
});

<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>

模型集合

在您的

入口名称视图中。呈现

，

此

未指向

视图

，因为它位于每个回调函数范围内。尝试将其更改为使用

self

：

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

    }
});

<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>

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;
}

下划线模板没有占位符变量：

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

entrynametpl:\.template（“”）//呈现空的li

请将此更正为：

entrynametpl: _.template('<li><a href="#"><%= name %></a></li>')

entrynametpl:\.template（“”）

好的，我解决了这个问题，我在构造函数（初始化函数）之外设置了视图的元素“el”属性，因此它永远不会使用正确的dom元素进行设置，因为dom元素位于html文件中的脚本引用之后。一旦我将脚本导入移到页面末尾，瞧，生活是美好的。愚蠢的错误花费了你太多时间

这里有一些html错误，li不在ul中…没有控制台错误，我没有看到任何html错误…ul是collectionview容器（在标记中显示为entriestree），li是modelview页面（在html标记中不存在，只是在js文件中），我添加了no-luckmade此更改仍然没有luckCannot think，你在网上有吗？或者类似于jsfiddle的东西？到目前为止仍在与此进行斗争…虽然取得了一些进展..我将self的行更改为$（“#entriestree”）.append（item.render（）.el），它成功了。我还使用VisualStudio（将onload事件添加到body并调用deviceready函数）调试了js，并在断点处注意到EntryNamesView似乎没有选择正确的element@user2275941在我的电脑上似乎工作正常，但我确实看到一些奇怪的东西。1.在

EntryNameView

中，您将

放入

中，您可能需要删除模板中的重复li。2.我不知道你为什么要调用

\uuu.bindAll（这个“render”）

在

EntryNamesView

中，似乎没有任何作用。@user2275941尽管这些小东西不应该阻止您的视图被呈现。我想我缺少一些环境设置。@user2275941还有一件事。。。。为了让它工作，我删除了

document.addEventListener（“DeviceRady”，ondeviceRady，false）和$（“导航面板”）。面板（“打开”）
，然后手动调用ondevicerady（）
。这三个都是问题，而不仅仅是您的上一个bug。