![k3Nzz]( "k3Nzz")
本文介绍了在 Marionette 布局中使用 jQuery 选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在 Marionette 区域内使用 jquery 标签.
两个标签区域的 HTML 如下所示:
<ul><li><a href="#tabs-1">Nunc tincidunt</a></li><li><a href="#tabs-2">Proin dolor</a></li><div id="tabs-1"><p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.Curabitur nec arcu.Donec sollicitudin mi 坐在 amet mauris.Nam elementum quam ullamcorper ante.Etiam aliquet massa et lorem.Mauris dapibus lacus auctor risus.Aenean tempor ullamcorper 狮子座.Vivamus sed magna quis ligula eleifend adipiscing.杜伊斯奥奇.Aliquam sodales tortor vitae ipsum.Aliquam nulla.Duis aliquam Molestie 时代.Ut et mauris vel pede varius sollicitudin.Sed ut dolor nec orci tincidunt interdum.菜豆.Nunc tristique tempus lectus.</p>
<div id="tabs-2"><p>Morbi tincidunt, dui sat amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.Duis scelerisque Molestie turpis.Sed fringilla、massa eget luctusmalesuada、metus eros molestie lectus、ut tempus eros massa ut dolor.Aenean aliquet fringilla sem.Suspendisse sed ligula in ligula suscipit aliquam.Praesent 在 eros 前庭 mi adipiscing adipiscing.Morbi facilisis.Curabitur ornare consequat nunc.Aenean vel metus.Ut posuere viverra nulla.Aliquam 时代 volutpat.Pellentesque convallis.Maecenas feugiat、tellus pellentesque pretium posuere、felis lorem euismod felis、eu ornare leo nisi vel felis.Mauris consectetur tortor et purus. </p>
我想做的是有一个这样的区域，在标签"中有多个事物"——所以添加一个 <li > 和一个 div.
我在主干中所做的是抓取这些东西"的集合，并在每个东西上运行:
if (thing_type === "content_pane") {thing_view = new APP.Views.ThingView({模型:thing_model});}//绘制区域total_layout.some_region.show(thing_view);
事物视图如下所示:
<div class="tabs"><ul><li><a href="#tabs-1">{{mustache_variable}}</a></li><span class="thing_panes"><div id="tabs-1"><p>1roin <a href="http://www.google.com/">Google</a>elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.Curabitur nec arcu.Donec sollicitudin mi 坐在 amet mauris.Nam elementum quam ullamcorper ante.Etiam aliquet massa et lorem.Mauris dapibus lacus auctor risus.Aenean tempor ullamcorper 狮子座.Vivamus sed magna quis ligula eleifend adipiscing.杜伊斯奥奇.Aliquam sodales tortor vitae ipsum.Aliquam nulla.Duis aliquam Molestie 时代.Ut et mauris vel pede varius sollicitudin.Sed ut dolor nec orci tincidunt interdum.菜豆.Nunc tristique tempus lectus.</p>
</span>
显然，现在每次运行此循环时，它都会复制前一个实例.
我的问题是——为每个视图附加 li 和 div 的最佳方法是什么?是复合视图吗?它是嵌入一个区域吗?集合视图?我对此有点迷茫，非常感谢您提供一些意见.
解决方案
您可以将同一个集合绑定到多个视图.这是一个使用两个集合视图的示例.我确定还有其他方法，但这是相当简单的.
http://jsfiddle.net/puleos/k3Nzz/
标记:
<section id="tabs"></section><section id="tab-content"></section>
<a id="add-tab" href="#addTab/2">添加标签！</a><script type="text/html" id="tab-template"><a href="#tabs-<%=id%>"><%=tabName%></a><script type="text/html" id="tab-content-template"><div id="tabs-<%=id%>"><p><%=含量%</p>
JS
var App = new Marionette.Application();App.addRegions({"tabs": "#tabs","tabContent": "#tab-content"});App.on(初始化:之后"，函数(){Backbone.history.start();});App.module("TabModule", function(Mod, App, Backbone, Marionette, $, _){var tabsCollection = new Backbone.Collection([{ id: 1,tabName: "tab1",content: "tab1 content elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sat amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem"},{ id: 2,tabName: "tab2",content: "tab2 content elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sat amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem"},]);var TabItem = Marionette.ItemView.extend({tagName: "li",模板:#tab-template"});var TabView = Marionette.CollectionView.extend({项目视图:TabItem，itemViewContainer: "ul",标签名称:ul"});var TabContentItem = Marionette.ItemView.extend({标签名称:div"，模板:#tab-content-template"});var TabContentView = Marionette.CollectionView.extend({itemView: TabContentItem,itemViewContainer:div"});//定义一个控制器来运行这个模块//--------------------------------------var Router = Marionette.AppRouter.extend({应用路由:{"addTab/:tab": "addTab"},});var 控制器 = Marionette.Controller.extend({初始化:函数(选项){this.region = options.region},添加标签:功能(标签){var tabCount = tabsCollection.length + 1;tabsCollection.add({id:tabCount，tabName: "tab" + tabCount,内容:"tab" + tabCount + "elit arcu..."});$("#tab-container").tabs("刷新");$("#add-tab").attr("href", "#addTab/"+ tabCount);},开始:函数(){var tabView = new TabView({集合:tabsCollection});var tabContentView = new TabContentView({集合:tabsCollection});App.tabs.show(tabView);App.tabContent.show(tabContentView);$("#tab-container").tabs();}});Mod.addInitializer(函数(){Mod.controller = new Controller();Mod.router = 新路由器({控制器:Mod.controller});Mod.controller.start();});});//启动应用//-------------应用程序开始()；
I'm working on trying to use jquery tabs inside of a Marionette region.
The HTML for a two tabbed area looks like this:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
</div>
What I want to do is have an area like this, with multiple "things" in "tabs" -- so adding a < li > and a div to this.
What I'm doing in backbone is grabbing a collection of these "things", and running this on each:
if (thing_type === "content_pane") {
thing_view = new APP.Views.ThingView({ model : thing_model});
}
//Paint the region
overall_layout.some_region.show(thing_view);
The thing view looks like this:
<div class="thing_view ui-state-active">
<div class="tabs">
<ul>
<li><a href="#tabs-1">{{mustache_variable}}</a></li>
</ul>
<span class="thing_panes">
<div id="tabs-1">
<p>1roin <a href="http://www.google.com/">Google</a>elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
</span>
</div>
</div>
Obviously, right now each time this loop runs it copies over the previous instance.
My question is this -- what is the best way to append a li and a div for each view? Is it a composite view? Is it embedding a region? Collection view? I'm a bit lost on this and would really appreciate some input.
解决方案
You can bind the same collection to multiple views. Here is an example using two collection views. There are other ways I am sure but this is fairly straight forward.
http://jsfiddle.net/puleos/k3Nzz/
Markup:
<div id="tab-container">
<section id="tabs"></section>
<section id="tab-content"></section>
</div>
<a id="add-tab" href="#addTab/2">Add a Tab!</a>
<script type="text/html" id="tab-template">
<a href="#tabs-<%=id%>"><%=tabName%></a>
</script>
<script type="text/html" id="tab-content-template">
<div id="tabs-<%=id%>">
<p><%=content%></p>
</div>
</script>
JS
var App = new Marionette.Application();
App.addRegions({
"tabs": "#tabs",
"tabContent": "#tab-content"
});
App.on("initialize:after", function() {
Backbone.history.start();
});
App.module("TabModule", function(Mod, App, Backbone, Marionette, $, _){
var tabsCollection = new Backbone.Collection([
{ id: 1,
tabName: "tab1",
content: "tab1 content elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem"
},
{ id: 2,
tabName: "tab2",
content: "tab2 content elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem"
},
]);
var TabItem = Marionette.ItemView.extend({
tagName: "li",
template: "#tab-template"
});
var TabView = Marionette.CollectionView.extend({
itemView: TabItem,
itemViewContainer: "ul",
tagName: "ul"
});
var TabContentItem = Marionette.ItemView.extend({
tagName: "div",
template: "#tab-content-template"
});
var TabContentView = Marionette.CollectionView.extend({
itemView: TabContentItem,
itemViewContainer: "div"
});
// Define a controller to run this module
// --------------------------------------
var Router = Marionette.AppRouter.extend({
appRoutes: {
"addTab/:tab": "addTab"
},
});
var Controller = Marionette.Controller.extend({
initialize: function(options){
this.region = options.region
},
addTab: function(tab){
var tabCount = tabsCollection.length + 1;
tabsCollection.add({
id: tabCount,
tabName: "tab" + tabCount,
content: "tab" + tabCount + "elit arcu..."
});
$("#tab-container").tabs("refresh");
$("#add-tab").attr("href", "#addTab/"+ tabCount);
},
start: function(){
var tabView = new TabView({
collection: tabsCollection
});
var tabContentView = new TabContentView({
collection: tabsCollection
});
App.tabs.show(tabView);
App.tabContent.show(tabContentView);
$("#tab-container").tabs();
}
});
Mod.addInitializer(function(){
Mod.controller = new Controller();
Mod.router = new Router({
controller: Mod.controller
});
Mod.controller.start();
});
});
// Start the app
// -------------
App.start();
这篇关于在 Marionette 布局中使用 jQuery 选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！