0
Backbone.js kullanarak visualforce sayfasında "Contact" sobject alanlarını almak için başarılıyım. Hem hesap hem de iletişim alanlarını aynı anda ve aynı sayfada göstermek istiyorum. Bunu yapmak için, her nesne için iki model veya her nesne için iki koleksiyon kullanmalıyım. Evet ise, lütfen biraz açıklayınız. Lütfen bana backbone.js için yeni olduğum gibi yol göster. İşte benim kodum.Salesforce: Backbone.js kullanarak visualforce sayfasında iki nesne "Hesap" ve "İletişim" alanlarını nasıl edinebilirim?
<apex:page docType="html-5.0" standardStylesheets="false" showHeader="false" sidebar="false">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contacts in Backbone.js</title>
<!-- ========= -->
<!-- CSS -->
<!-- ========= -->
<link href="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/css/jquery.mobile-1.3.0.min.css')}" rel="stylesheet" />
<!-- ========= -->
<!-- Libraries -->
<!-- ========= -->
<script src="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/lib/jquery-2.0.0.min.js')}" type="text/javascript"></script>
<script src="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/lib/underscore-1.4.4.min.js')}" type="text/javascript"></script>
<script src="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/lib/backbone-1.0.0.min.js')}" type="text/javascript"></script>
<script src="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/lib/forcetk.js')}" type="text/javascript"></script>
<script src="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/lib/force.entity.js')}" type="text/javascript"></script>
<script>
$(document).on("mobileinit",
// Set up the "mobileinit" handler before including jQuery Mobile
function() {
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
}
)
</script>
<script src="{!URLFOR($Resource.MobileSample_Resources_Backbone, 'resources/lib/jquerymobile.js')}" type="text/javascript"></script>
</head>
<body>
<!-- ========= -->
<!-- HTML CODE -->
<!-- ========= -->
<div id="contacts" data-role="page" data-title="Contacts">
<div data-role="header">
<h1>Contacts</h1>
</div><!-- /header -->
<div data-role="content" id="contacts-content">
</div>
</div>
<div id="contact" data-role="page" data-title="Contact">
<div data-role="header">
<a href='#' id="back" class='ui-btn-left' data-icon='arrow-l'>Back</a>
<h1>Contact</h1>
</div><!-- /header -->
<div data-role="content" id="contact-content">
</div>
</div>
<!-- ========= -->
<!-- Templates -->
<!-- ========= -->
<script type="text/template" id="contacts-template">
<form>
<button data-role="button" class="new">New Contact</button>
</form>
<ul data-role="listview" data-inset="true" id="contact-list">
</ul>
<div data-role="footer">
<div data-role="fieldcontain">
<label for="select-theme" class="select">UI Theme:</label>
<select class="theme-selector" name="select-theme" id="select-theme">
<option value="default">default</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
</div>
</div>
</script>
<script type="text/template" id="contact-template">
<% if (typeof(Id) !== 'undefined') { %>
<a href="#<%= Id %>"><%- Name %></a>
<% } else { %>
<%- Name %>
<% } %>
</script>
<script type="text/template" id="contact-detail-template">
<form name="contactform" id="contactform">
<% if (typeof(Id) !== 'undefined') { %>
<input type="hidden" name="Id" id="Id" value="<%- Id %>" />
<% } %>
<div data-role="fieldcontain">
<label for="Name">First Name:</label>
<% if (typeof(FirstName) !== 'undefined') { %>
<input name="FirstName" id="FirstName" value="<%- FirstName %>" />
<% } else { %>
<input name="FirstName" id="FirstName" />
<% } %>
</div>
<div data-role="fieldcontain">
<label for="Name">Last Name:</label>
<% if (typeof(LastName) !== 'undefined') { %>
<input name="LastName" id="LastName" value="<%- LastName %>" />
<% } else { %>
<input name="LastName" id="LastName" />
<% } %>
</div>
<div data-role="fieldcontain">
<label for="Email">Email:</label>
<% if (typeof(Email) !== 'undefined') { %>
<input name="Email" id="Email" value="<%- Email %>" />
<% } else { %>
<input name="Email" id="Email" />
<% } %>
</div>
<button data-role="button" data-icon="check" data-inline="true" data-theme="b" class="save">Save</button>
<% if (typeof(Id) !== 'undefined') { %>
<button data-role="button" data-icon="delete" data-inline="true" class="destroy">Delete</button>
<% } %>
</form>
</script>
<!-- =============== -->
<!-- Javascript code -->
<!-- =============== -->
<script type="text/javascript">
function changeTheme(theme){
var hfTheme = theme,
cTheme = theme;
if (theme === 'default') {
// "If no theme swatch letter is set at all, the framework uses the
// "a" swatch (black in the default theme) for headers and footers
// and the "c" swatch (light gray in the default theme) for the page
// content to maximize contrast between the both."
// http://jquerymobile.com/demos/1.2.1/docs/api/themes.html
hfTheme = "a";
cTheme = "c";
}
$.mobile.activePage.find('.ui-btn').not('.ui-li-divider')
.removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-
hover-e')
.addClass('ui-btn-up-' + cTheme)
.attr('data-theme', cTheme);
$.mobile.activePage.find('.ui-li-divider').each(function (index, obj) {
if ($(this).parent().attr('data-divider-theme') == 'undefined') {
$(this).removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e')
.addClass('ui-bar-' + cTheme)
.attr('data-theme', cTheme);
}
})
$.mobile.activePage.find('.ui-header, .ui-footer')
.removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e')
.addClass('ui-bar-' + hfTheme)
.attr('data-theme', hfTheme);
$.mobile.activePage.removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e')
.addClass('ui-body-' + cTheme)
.attr('data-theme', cTheme);
}
$(document).ready(function() {
var creds = {
accessToken: '{!$Api.Session_ID}'
};
Force.init(creds);
myapp();
});
function myapp() {
var app = {}; // create namespace for our app
//--------------
// Models
//--------------
app.Contact = Force.SObject.extend({
sobjectType:'Contact',
fieldlist:['Id', 'FirstName', 'LastName', 'Email']
});
//--------------
// Collections
//--------------
app.ContactsCollection = Force.SObjectCollection.extend({
model: app.Contact,
fieldlist:['Id', 'Name', 'FirstName', 'LastName', 'Email'],
config: function() {
return {type:"soql", query:"SELECT " + this.fieldlist.join(",") + " FROM Contact ORDER BY Name LIMIT 25"};
}
}),
//--------------
// Views
//--------------
// renders individual Contact list item (li)
app.ContactView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#contact-template').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this; // enable chained calls
},
initialize: function(){
}
});
// renders individual Contact for editing
app.ContactDetailView = Backbone.View.extend({
template: _.template($('#contact-detail-template').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this; // enable chained calls
},
initialize: function(){
this.model.on('destroy', this.remove, this);
this.render();
},
events: {
'change' : 'change',
'click .save' : 'save',
'click .destroy': 'destroy'
},
change: function (event) {
// Apply the change to the model
var target = event.target;
var change = {};
change[target.name] = target.value;
this.model.set(change);
},
save: function(){
this.model.save(null, {
success: function(model) {
app.router.navigate('contacts', {trigger: true});
},
error: function() {
alert('Error saving');
}
});
return false;
},
destroy: function(){
this.model.destroy({
success: function() {
app.router.navigate('contacts', {trigger: true});
},
error: function() {
alert('Error deleting');
}
});
return false;
}
});
// renders the full list of Contacts calling ContactView for each one.
app.ContactsView = Backbone.View.extend({
template: _.template($('#contacts-template').html()),
initialize: function() {
this.render();
this.model.on('add', this.render, this);
this.model.on('reset', this.render, this);
},
events: {
'click .new' : 'newContact',
'change .theme-selector' : 'changeTheme'
},
renderOne: function(contact){
var view = new app.ContactView({model: contact});
this.$('#contact-list').append(view.render().el);
},
render: function(){
this.$el.html(this.template());
this.$('#contact-list').empty();
for (var i = 0, l = this.model.models.length; i < l; i++) {
this.renderOne(this.model.models[i]);
}
},
changeTheme: function(event){
event.preventDefault();
var theme = $(event.target).children("option").filter(":selected").text();
changeTheme(theme);
},
newContact: function(){
app.router.navigate('/new', true);
return false;
}
});
//Define the Application Router
app.Router = Backbone.Router.extend({
routes: {
"": "contacts",
"contacts":"contacts",
"new": "newContact",
":id": "contact"
},
contacts: function() {
var contactsCollection = new app.ContactsCollection();
$.mobile.loading("show", { text: 'Loading Contacts', textVisible: true });
contactsCollection.fetch({success: function(){
$.mobile.loading("hide");
$("#contacts-content").html(new app.ContactsView({model: contactsCollection}).el);
// Let jQuery Mobile do its stuff
$("#contacts-content").trigger('create');
$.mobile.changePage("#contacts" , { reverse: false, changeHash: false });
}});
},
contact: function(id) {
var contact = new app.Contact({Id: id});
$.mobile.loading("show", { text: 'Loading Contact', textVisible: true });
contact.fetch({success: function(){
$.mobile.loading("hide");
$("#contact-content").html(new app.ContactDetailView({model: contact}).el);
$("#contact-content").trigger('create');
$.mobile.changePage("#contact" , { reverse: false, changeHash: false });
}});
},
newContact: function(id) {
var contact = new app.Contact();
$("#contact-content").empty();
$("#contact-content").html(new app.ContactDetailView({model: contact}).el);
$("#contact-content").trigger('create');
$.mobile.changePage("#contact" , { reverse: false, changeHash: false });
}
});
app.router = new app.Router();
Backbone.history.start();
}
</script>
</body>
</apex:page>