figured out how to get tabs to work in backbone.

pull/6/head
kay.one 12 years ago
parent 460b90bc95
commit 1e26b2513c

@ -0,0 +1,80 @@
NzbDrone.AddSeriesView = Backbone.Marionette.ItemView.extend({
template: "#add-series-template",
initialise: function () {
},
onRender: function () {
this.$el.find('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
},
});
NzbDrone.AddNewSeriesView = Backbone.Marionette.ItemView.extend({
template: "#add-new-series",
ui: {
seriesSearch: '#series-search'
},
onRender: function () {
console.log('binding auto complete');
var self = this;
this.ui.seriesSearch
.autocomplete({
source: "http://localhost:1232/api/series/lookup",
minLength: 1,
delay: 500,
select: function (event, ui) {
$(this).val(ui.item.Title);
$(this).siblings('.seriesId').val(ui.item.Id);
return false;
},
open: function (event, ui) {
$('.ui-autocomplete').addClass('seriesLookupResults');
},
close: function (event, ui) {
$('.ui-autocomplete').removeClass('seriesLookupResults');
}
})
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.SeriesName + "<img src='../../Content/Images/thetvdb.png' class='tvDbLink' title='Click to see series details from TheTVDB' rel='" + item.Url + "' /></a>")
.appendTo(ul);
};
},
});
NzbDrone.AddExistingSeriesView = Backbone.Marionette.ItemView.extend({
template: "#add-existing-series",
events: {
'click #single': 'single',
'click #multiple': 'multiple'
},
single: function () {
NzbDrone.Router.navigate(NzbDrone.Routes.Series.AddExistingSingle, { trigger: true });
},
multiple: function () {
NzbDrone.Router.navigate(NzbDrone.Routes.Series.AddExistingMultiple, { trigger: true });
}
});
NzbDrone.AddExistingSeriesSingleView = Backbone.Marionette.ItemView.extend({
template: "#add-existing-series-single"
});
NzbDrone.AddExistingSeriesMultipleView = Backbone.Marionette.ItemView.extend({
template: "#add-existing-series-multiple"
})

@ -9,9 +9,9 @@ namespace NzbDrone.Web
/// </summary> /// </summary>
public class CassetteBundleConfiguration : IConfiguration<BundleCollection> public class CassetteBundleConfiguration : IConfiguration<BundleCollection>
{ {
public const string JQUERY_BUNDLE = "jquery";
public const string BASE_STYLE = "BASE_STYLE"; public const string BASE_STYLE = "BASE_STYLE";
public const string BASE_SCRIPT = "BASE_SCRIPT"; public const string BASE_SCRIPT = "BASE_SCRIPT";
public const string BACKBONE = "BACKBONE";
public const string FONTS = "FONTS"; public const string FONTS = "FONTS";
public const string VALIDATION_SCRIPTS = "VALIDATION_SCRIPTS"; public const string VALIDATION_SCRIPTS = "VALIDATION_SCRIPTS";
public const string FILEBROWSER_SCRIPT = "FILEBROWSER_SCRIPT"; public const string FILEBROWSER_SCRIPT = "FILEBROWSER_SCRIPT";
@ -20,7 +20,6 @@ namespace NzbDrone.Web
public void Configure(BundleCollection bundles) public void Configure(BundleCollection bundles)
{ {
bundles.AddUrlWithAlias<StylesheetBundle>("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300'", FONTS); bundles.AddUrlWithAlias<StylesheetBundle>("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300'", FONTS);
bundles.AddUrlWithAlias<ScriptBundle>("//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js", JQUERY_BUNDLE);
bundles.Add<StylesheetBundle>(BASE_STYLE, new[]{ bundles.Add<StylesheetBundle>(BASE_STYLE, new[]{
@ -33,10 +32,23 @@ namespace NzbDrone.Web
bundle => bundle.AddReference("/" + FONTS)); bundle => bundle.AddReference("/" + FONTS));
bundles.Add<ScriptBundle>(BASE_SCRIPT, new[]{ bundles.Add<ScriptBundle>(BASE_SCRIPT, new[]{
"scripts2\\jquery-1.8.2.js",
"scripts2\\jquery.livequery.js", "scripts2\\jquery.livequery.js",
"scripts2\\bootstrap-mvc.js", "scripts2\\bootstrap-mvc.js",
"scripts2\\metro\\jquery.metro.js"}, "scripts2\\bootstrap.js",
bundle => bundle.AddReference("/" + JQUERY_BUNDLE)); "scripts2\\metro\\jquery.metro.js"});
bundles.Add<ScriptBundle>(BACKBONE, new[]{
"JsLibraries\\underscore.js",
"JsLibraries\\backbone.js",
"JsLibraries\\backbone.marionette.js",
"app.js",
"AddSeries\\Views\\addSeriesView.js"},
bundle => bundle.AddReference("/" + BASE_SCRIPT));
bundles.Add<StylesheetBundle>(FILEBROWSER_STYLE, new[]{ bundles.Add<StylesheetBundle>(FILEBROWSER_STYLE, new[]{

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

@ -189,6 +189,8 @@
<Compile Include="Helpers\RenderActionHelper.cs" /> <Compile Include="Helpers\RenderActionHelper.cs" />
<Compile Include="Helpers\Validation\RequiredIfAnyAttribute.cs" /> <Compile Include="Helpers\Validation\RequiredIfAnyAttribute.cs" />
<Compile Include="Helpers\Validation\RequiredIfAttribute.cs" /> <Compile Include="Helpers\Validation\RequiredIfAttribute.cs" />
<Content Include="AddSeries\Views\addSeriesView.js" />
<Content Include="app.js" />
<Content Include="Content2\base.css" /> <Content Include="Content2\base.css" />
<Content Include="Content2\bootstrap-metro.css" /> <Content Include="Content2\bootstrap-metro.css" />
<Content Include="Content2\bootstrap-overrides.css" /> <Content Include="Content2\bootstrap-overrides.css" />
@ -390,6 +392,12 @@
<Compile Include="Models\UpcomingEpisodeModel.cs" /> <Compile Include="Models\UpcomingEpisodeModel.cs" />
<Compile Include="Models\UpdateModel.cs" /> <Compile Include="Models\UpdateModel.cs" />
<Compile Include="Properties\AssemblyInfo.cs" /> <Compile Include="Properties\AssemblyInfo.cs" />
<Content Include="JsLibraries\backbone.js" />
<Content Include="JsLibraries\backbone.marionette.js" />
<None Include="JsLibraries\jquery-1.8.2.intellisense.js" />
<Content Include="JsLibraries\jquery-1.8.2.js" />
<Content Include="JsLibraries\jquery-ui-1.9.0.js" />
<Content Include="JsLibraries\underscore.js" />
<Content Include="Scripts2\bootstrap-mvc.js" /> <Content Include="Scripts2\bootstrap-mvc.js" />
<Content Include="Scripts2\bootstrap.js" /> <Content Include="Scripts2\bootstrap.js" />
<None Include="Scripts2\jquery-1.8.2.intellisense.js" /> <None Include="Scripts2\jquery-1.8.2.intellisense.js" />

@ -1,26 +1,48 @@
@{ @{
ViewBag.Title = "Bootstrap Page"; ViewBag.Title = "Add Series";
Layout = "~/Views/Shared/_Bootstrap.cshtml"; Layout = "~/Views/Shared/_Bootstrap.cshtml";
} }
<script type="text/template" id="add-series-template">
Hello World <div id="add-series" class="row">
<br> <ul class="nav nav-tabs" id="myTab">
<br> <li class="active"><a href="#home">Home</a></li>
<br> <li><a href="#profile">Profile</a></li>
<br> <li><a href="#messages">Messages</a></li>
<br> <li><a href="#settings">Settings</a></li>
<br> </ul>
<br>
<br> <div class="tab-content">
<br> <div class="tab-pane active" id="home">.eeeeee..</div>
<br> <div class="tab-pane" id="profile">...ddddd</div>
<br> <div class="tab-pane" id="messages">..dddd.</div>
<br> <div class="tab-pane" id="settings">..ggggggggggggggggggggggg.</div>
<br> </div>
<br> </div>
<br> </script>
<br> @*
<br> <div id="add-existing-series">
<br> <h1>Add Existing</h1>
<br> <h2 id="single">Single Series</h2>
<h2 id="multiple">All of my series</h2>
</div>
<div id="add-new-series">
<h1>Add New</h1>
<div class="well">
<input type="text" id="series-search" name="series-search" placeholder="Search for a series to add ..." class="span12" autocomplete="off" />
</div>
</div>
<div id="add-existing-series-single">
<h1>single
</h1>
</div>
<div id="add-existing-series-multiple">
<h1>multiple</h1>
</div>
*@

@ -4,7 +4,7 @@
@using NzbDrone.Web.Helpers @using NzbDrone.Web.Helpers
@{ @{
Bundles.Reference<StylesheetBundle>(CassetteBundleConfiguration.BASE_STYLE); Bundles.Reference<StylesheetBundle>(CassetteBundleConfiguration.BASE_STYLE);
Bundles.Reference<ScriptBundle>(CassetteBundleConfiguration.BASE_SCRIPT); Bundles.Reference<ScriptBundle>(CassetteBundleConfiguration.BACKBONE);
} }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
@ -26,6 +26,9 @@
@Bundles.RenderStylesheets() @Bundles.RenderStylesheets()
</head> </head>
<body> <body>
<script type="text/template" id="search_template">
@RenderBody()
</script>
<div class="container"> <div class="container">
<div id="menu" class="row"> <div id="menu" class="row">
@ -54,7 +57,9 @@
<div class="row sub-menu"> <div class="row sub-menu">
@RenderSection("ActionMenu", required: false) @RenderSection("ActionMenu", required: false)
</div> </div>
@RenderBody() <div class="row">
<div id="main-region"></div>
</div>
</div> </div>
</div> </div>
<div id="footer" class="row"> <div id="footer" class="row">
@ -66,5 +71,10 @@
@Bundles.RenderScripts() @Bundles.RenderScripts()
<script type="text/javascript">
NzbDrone.start();
</script>
</body> </body>
</html> </html>

@ -0,0 +1,78 @@
NzbDrone = new Backbone.Marionette.Application();
NzbDrone.Constants = {
};
NzbDrone.Events = {
DisplayInMainRegion: "DisplayInMainRegion",
};
NzbDrone.Routes = {
Series: {
Add: 'series/add',
AddNew: 'series/addnew',
AddExisting: 'series/addExisting',
AddExistingSingle: 'series/addExisting/single',
AddExistingMultiple: 'series/addExisting/multiple',
},
};
NzbDrone.Controller = Backbone.Marionette.Controller.extend({
AddSeries: function () {
NzbDrone.mainRegion.show(new NzbDrone.AddSeriesView());
},
AddNewSeries: function () {
NzbDrone.mainRegion.show(new NzbDrone.AddNewSeriesView());
},
AddExistingSeries: function () {
NzbDrone.mainRegion.show(new NzbDrone.AddExistingSeriesView());
},
AddExistingSeriesSingle: function () {
NzbDrone.mainRegion.show(new NzbDrone.AddExistingSeriesSingleView());
},
AddExistingSeriesMultiple: function () {
NzbDrone.mainRegion.show(new NzbDrone.AddExistingSeriesMultipleView());
},
});
NzbDrone.MyRouter = Backbone.Marionette.AppRouter.extend({
controller: new NzbDrone.Controller(),
// "someMethod" must exist at controller.someMethod
appRoutes: {
"":"AddSeries",
"series/add": "AddSeries",
"series/addnew": "AddNewSeries",
"series/addExisting": "AddExistingSeries",
"series/addExisting/single": "AddExistingSeriesSingle",
"series/addExisting/multiple": "AddExistingSeriesMultiple",
}
});
NzbDrone.addInitializer(function (options) {
console.log("starting application");
NzbDrone.addRegions({
mainRegion: "#main-region",
});
NzbDrone.Router = new NzbDrone.MyRouter();
Backbone.history.start();
});
Loading…
Cancel
Save