figured out how to get tabs to work in backbone.

This commit is contained in:
kay.one 2013-01-20 16:19:13 -08:00
parent 460b90bc95
commit 1e26b2513c
12 changed files with 31658 additions and 27 deletions

View File

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

View File

@ -9,9 +9,9 @@ namespace NzbDrone.Web
/// </summary>
public class CassetteBundleConfiguration : IConfiguration<BundleCollection>
{
public const string JQUERY_BUNDLE = "jquery";
public const string BASE_STYLE = "BASE_STYLE";
public const string BASE_SCRIPT = "BASE_SCRIPT";
public const string BACKBONE = "BACKBONE";
public const string FONTS = "FONTS";
public const string VALIDATION_SCRIPTS = "VALIDATION_SCRIPTS";
public const string FILEBROWSER_SCRIPT = "FILEBROWSER_SCRIPT";
@ -20,7 +20,6 @@ namespace NzbDrone.Web
public void Configure(BundleCollection bundles)
{
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[]{
@ -33,10 +32,23 @@ namespace NzbDrone.Web
bundle => bundle.AddReference("/" + FONTS));
bundles.Add<ScriptBundle>(BASE_SCRIPT, new[]{
"scripts2\\jquery-1.8.2.js",
"scripts2\\jquery.livequery.js",
"scripts2\\bootstrap-mvc.js",
"scripts2\\metro\\jquery.metro.js"},
bundle => bundle.AddReference("/" + JQUERY_BUNDLE));
"scripts2\\bootstrap.js",
"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[]{

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

9440
NzbDrone.Web/JsLibraries/jquery-1.8.2.js vendored Normal file

File diff suppressed because it is too large Load Diff

14742
NzbDrone.Web/JsLibraries/jquery-ui-1.9.0.js vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -189,6 +189,8 @@
<Compile Include="Helpers\RenderActionHelper.cs" />
<Compile Include="Helpers\Validation\RequiredIfAnyAttribute.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\bootstrap-metro.css" />
<Content Include="Content2\bootstrap-overrides.css" />
@ -390,6 +392,12 @@
<Compile Include="Models\UpcomingEpisodeModel.cs" />
<Compile Include="Models\UpdateModel.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.js" />
<None Include="Scripts2\jquery-1.8.2.intellisense.js" />

View File

@ -1,26 +1,48 @@
@{
ViewBag.Title = "Bootstrap Page";
ViewBag.Title = "Add Series";
Layout = "~/Views/Shared/_Bootstrap.cshtml";
}
<script type="text/template" id="add-series-template">
Hello World
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="add-series" class="row">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">.eeeeee..</div>
<div class="tab-pane" id="profile">...ddddd</div>
<div class="tab-pane" id="messages">..dddd.</div>
<div class="tab-pane" id="settings">..ggggggggggggggggggggggg.</div>
</div>
</div>
</script>
@*
<div id="add-existing-series">
<h1>Add Existing</h1>
<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>
*@

View File

@ -4,7 +4,7 @@
@using NzbDrone.Web.Helpers
@{
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">
@ -26,6 +26,9 @@
@Bundles.RenderStylesheets()
</head>
<body>
<script type="text/template" id="search_template">
@RenderBody()
</script>
<div class="container">
<div id="menu" class="row">
@ -54,7 +57,9 @@
<div class="row sub-menu">
@RenderSection("ActionMenu", required: false)
</div>
@RenderBody()
<div class="row">
<div id="main-region"></div>
</div>
</div>
</div>
<div id="footer" class="row">
@ -66,5 +71,10 @@
@Bundles.RenderScripts()
<script type="text/javascript">
NzbDrone.start();
</script>
</body>
</html>

78
NzbDrone.Web/app.js Normal file
View File

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