使用带Marionette的jQueryMobile加载模板

-1

我正在尝试将JQM与Marionette配合使用，但面临一个问题。使用带Marionette的jQueryMobile加载模板

问题：我有一个index.html页面，其空白的div与data-role =“page”和“content”。我有我的下划线模板文件，只有一个JQM风格的标签和按钮。

到目前为止，我成功地使用Marionette.ItemView和Marionette区域加载我的模板。一切都很好，像加载所有必需的脚本，如jQuery，JQM，Backbone.Marionette，加载jQueryMobile css等等。视图和标签以及按钮成功呈现。

但问题是我在我的模板中设置的div主题没有反映出来，甚至按钮或标签UI也不是由JQM提供的。

我认为，加载模板后，我应该刷新页面。但是，在哪里以及如何在我的代码中执行此操作。我已经尝试了很多代码，但没有任何工作。

这是index.html的

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<title>Index</title> 
<!-- data-main attribute tells require.js to load config.js after require.js loads. --> 
<script data-main="../js/apps/config" src="../js/ext_libs/require.js"></script> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 

    <header id="header" data-role="header"></header> 

    <div id="main" class="container-fluid" data-role="content"></div> 

    <footer data-role="footer" class="footer"> 
    </footer> 

</div> 
</body> 
</html>

这是我index_view

define([ "marionette", "templates" ], function(Marionette, templates) { 
console.log("Success..Inside Index View."); 
var IndexView = Marionette.ItemView.extend({ 
    template : templates.index_body({title: 'Worrrrrld', btn_submit: 'Submit'}) 
}); 
return IndexView; 
});

而且模板

<div data-theme="b" id="index_view"> 
<label><%= title %></label> 
<input type="submit" value=<%= btn_submit %> /> 
</div>

我App.js文件

define([ "jquery", 
    "underscore", 
    "backbone", 
    "marionette", 
    "index_view", 
    "header_view" ], function($,_, 
    Backbone, Marionette, IndexView, HeaderView) { 
'use strict'; 
console.log("Success...Inside App"); 
console.log("Success..Libraries loaded successfully."); 

var app = new Marionette.Application(); 
console.log("Success..App Object Got Created."); 

app.addRegions({ 
    header : '#header', 
    main : '#main', 
    footer : '#footer' 
}); 
console.log("Success..Regions Added"); 

app.addInitializer(function() { 
    console.log("Success..Creating Header View Object."); 
    app.header.show(new HeaderView()); 
    console.log("Success..Creating Index View Object."); 
    app.main.show(new IndexView()); 
}); 

app.on('initialize:after', function() { 
    Backbone.history.start(); 
}); 

$(document).on('pagebeforeshow', '#index', function(){ 
    console.log("Success..I am triggering event"); 
    $('[data-role="content"]').trigger('create'); 
}); 

console.log("Success..Returning App Object."); 
return app; 
});

来源

2013-05-27 Rachna

http://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content/14550417#14550417 – Gajotres

谢谢你的答复..但你能请指教我应该在哪里放置代码$（document）.on（'pagebeforeshow'，'#index'，function（）{增强新选择元素 $（'[data-role =“content”]'）。trigger（'create' ）; }）; – Rachna

@Gajotres我试着把我的app.js脚本放在上面。但没有工作，请告诉我，我是非常新的Jquery和Marionette编程 – Rachna

-1

@Nithalia

你可以看看jquerymobile-marionette。在那里，为了建模JQM页面，使用了Backbone.Marionette.Layout。你可以看到模板是如何加载和渲染的。

来源

2013-05-27 17:33:30

感谢您的答复..但我已经提到该链接..不同之处在于我不使用JQM路由器除了一切都是相同的但仍然无法正常工作......请告诉我一些其他选项。 – Rachna

你可以发布你的config.js吗？同样在你的index_view中，它会从哪里加载'模板'？ –

你好明..正如你所建议我引用你指定的代码。它工作完美，但你可以告诉我，helper.js中使用的方法是它的骨干代码正确..它不完全木偶......它是在低级别。我试图实现布局，但现在的模板是可见的早些时候，现在他们消失了...我已经张贴我的完整代码在这个位置请检查并让我知道.. ASAP – Rachna

使用带Marionette的jQueryMobile加载模板

回答

相关问题