I am trying to embedded two ember application into each other both uses ember data and ember route but I am struggling with Embedding them together I dunno even If that's possible. New to ember. Please let me know if its possible
Here is my Code
My html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ember.js</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- EmberJS dependencies -->
<!-- jQuery -->
<script src="http://ift.tt/1idVTXC"></script>
<!-- Handlebars -->
<script src="http://ift.tt/1lBM3DF"></script>
<!-- Ember.js -->
<script src="http://ift.tt/1nvudRw"></script>
<script src="http://ift.tt/1LB4Qiu"></script>
<script src="http://ift.tt/1LB4SXG"></script>
<!-- ember-easyForm -->
<script src="http://ift.tt/1o1DZk7"></script>
<!-- ember-validations -->
<script src="http://ift.tt/1LB4Te2"></script>
<!-- Lightstreamer JavaScript Client library -->
<script src="js/require.js"></script>
<script src="js/lightstreamer.js"></script>
<!-- EmberJS code application -->
<script src="js/stockListDemoApp.js"></script>
<script src="js/app.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://ift.tt/1o1DZk5">
<script src="http://ift.tt/1wqiHQh"></script>
</head>
<body>
<section>
<div id="#StockListDemo">
<script type="text/x-handlebars" data-template-name="stock">
<div id="wrap">
<div id="top">
<a id="logoEmber" href="http://emberjs.com" target="_blank"><img src="images/ember_logo.png" alt="EMBERLOGO" hspace="0" border="0" /></a>
<div id="title">STOCK-LIST</div>
</div>
<table cellspacing="0" cellpadding="2" width="780" border="0" >
<thead>
<tr class="tableTitle">
<td>Name</td>
<td>Last</td>
<td>Time</td>
<td>Change</td>
<td>Bid Size</td>
<td>Bid</td>
<td>Ask</td>
<td>Ask Size</td>
<td>Min</td>
<td>Max</td>
<td>Ref.</td>
<td>Open</td>
</tr>
</thead>
<tbody>
{{#each item in model}}
<tr {{bind-attr class="item.isOdd:colOdd:colEven"}}>
<td><div {{bind-attr class="item.isOdd:stockNameOdd:stockNameEven"}}>{{item.stock_name}}</div></td>
<td>{{item.last_price}}</td>
<td>{{item.time}}</td>
<td>{{item.pct_change}}</td>
<td>{{item.bid_quantity}}</td>
<td>{{item.bid}}</td>
<td>{{item.ask}}</td>
<td>{{item.ask_quantity}}</td>
<td>{{item.min}}</td>
<td>{{item.max}}</td>
<td>{{item.ref_price}}</td>
<td>{{item.open_price}}</td>
</tr>
{{/each}}
</tbody>
</table>
<div class="disc">Simulated market data.</div>
</div>
</br>
</br>
</script>
</div>
</section>
<section>
<div id="#App">
<script type="text/x-handlebars">
<div id="application" class="container-fluid">
<div class="row">
<div id="left-nav" class="col-md-3" style="background-color: #eeeeee">
<ul class="nav nav-pills nav-stacked sidebar">
{{#link-to "products" tagName="li"}}{{#link-to "products"}}Products{{/link-to}}{{/link-to}}
</ul>
</div>
<div id="main" class="col-md-9">
{{outlet}}
</div>
</div>
</div>
</script>
-->
<script type="text/x-handlebars" data-template-name="products">
{{#link-to "products" tagName="li"}}{{#link-to "products"}}Products{{/link-to}}{{/link-to}}
<h1>Products</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="products/index">
<table id="products_table" class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>number</th>
<th><button type="button" class="btn btn-default new-button" {{action "new"}}><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</thead>
<tbody>
{{#each product in model}}
<tr {{bind-attr id=product.htmlID}}>
<td class="name">{{#link-to "products.show" product}}{{product.name}}{{/link-to}}</td>
<td class="email">{{product.email}}</td>
<td class="number">{{product.number}}</td>
<td class="action-buttons"><button type="button" class="btn btn-default edit-button" {{action "edit" product}}><span class="glyphicon glyphicon-pencil"></span></button>
<button type="button" class="btn btn-default delete-button" {{action "delete" product}}><span class="glyphicon glyphicon-remove"></button></td>
</tr>
{{/each}}
</tbody>
</table>
<p id="products_count">Total: {{controllers.products.productsCount}} products.</p>
</script>
<script type="text/x-handlebars" data-template-name="products/show">
<h2><span class="name">{{name}}</span></h2>
<p>By <span class="email">{{email}}</span></p>
<p><strong>$<span class="number">{{number}}</span></strong></p>
<p class="action-buttons"><button type="button" class="btn btn-default edit-button" {{action "edit" model}}><span class="glyphicon glyphicon-pencil"></span></button>
<button type="button" class="btn btn-default delete-button" {{action "delete" model}}><span class="glyphicon glyphicon-remove"></button></p>
<p>{{#link-to 'products' class="index-link"}}Back to products index{{/link-to}}</p>
</script>
<script type="text/x-handlebars" data-template-name="products/edit">
<h2>{{#if isNew}}New{{else}}Edit{{/if}} Product</h2>
{{#form-for controller id="form-product" wrapper="bootstrap"}}
{{#input name}}
{{label-field name text="Product"}}
{{input-field name class="form-control" autofocus="true"}}
{{#if view.showError}}
{{error-field name}}
{{/if}}
{{/input}}
{{#input email }}
{{label-field email text="email"}}
{{input-field email class="form-control"}}
{{#if view.showError}}
{{error-field email}}
{{/if}}
{{/input}}
{{#input number}}
{{label-field number text="number"}}
{{input-field number class="form-control"}}
{{#if view.showError}}
{{error-field number}}
{{/if}}
{{/input}}
<button type="submit" class="btn btn-primary save-button" {{action "save" model}}>Save</button>
{{#if isNew}}
<button type="button" class="btn btn-default cancel-button" {{action "delete" model}}>Cancel</button>
{{else}}
<button type="button" class="btn btn-default cancel-button" {{action "cancel" model}}>Cancel</button>
<button type="button" class="btn btn-danger delete-button" {{action "delete" model}}>Delete</button>
{{/if}}
{{/form-for}}
</script>
</div>
</section>
</body>
</html>
my first app named as StockListDemoApp
// Create an Ember Application.
var StockListDemoApp = Ember.Application.create({
rootElement: '#StockListDemoApp'
});
// Define the "stock" resource, mapped to "/" path.
StockListDemoApp.Router.map(function() {
this.resource("stock", { path : "/" } );
});
// Create the StockItem class: its attributes map to the fields name of the subscribed items.
// In this way we realize a one-to-one mapping between EmberJS Data Model and Lighstreamer fields schema.
StockListDemoApp.StockItem = DS.Model.extend({
modulePrefix: 'kontrollpanel', // TODO: loaded via config
rootElement: '#StockListDemoApp'
Resolver: Resolver,
stock_name: DS.attr(),
last_price: DS.attr(),
time: DS.attr(),
pct_change: DS.attr(),
bid_quantity: DS.attr(),
bid: DS.attr(),
ask: DS.attr(),
ask_quantity: DS.attr(),
min: DS.attr(),
max: DS.attr(),
ref_price: DS.attr(),
open_price: DS.attr(),
// Computed property to let different rendering on the HTML table
isOdd: function() {
return this.get("id") % 2 == 0;
}.property('id')
});
// Use the local storage adapter to persist the model.
StockListDemoApp.ApplicationAdapter = DS.LSAdapter.extend({
namespace: 'stock-list'
});
// Define the StockRoute
StockListDemoApp.StockRoute = Ember.Route.extend({
// Initialization code
activate: function() {
store = this.store;
require(["js/lsClient", "Subscription"], function(lsClient, Subscription) {
var stockSubscription = new Subscription("MERGE",
["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8", "item9", "item10"],
["stock_name", "last_price", "time", "pct_change", "bid_quantity", "bid", "ask", "ask_quantity", "min", "max", "ref_price", "open_price"]
);
stockSubscription.setDataAdapter('QUOTE_ADAPTER');
stockSubscription.setRequestedSnapshot("yes");
stockSubscription.addListener({
onItemUpdate: function(info) {
var i = info.getItemPos();
if (!store.hasRecordForId('stockItem', i)) {
// Push an empty record, with only the primary key
store.push('stockItem', { id: i});
}
store.find('stockItem', i).then(function(stockItem) {
info.forEachChangedField(function(fieldName, fieldPos, value) {
// Set field value on the stockItem locally-persisted instance
stockItem.set(fieldName, value)
});
// Commit the changes on the local store
stockItem.save();
});
},
});
// Register the subscription
lsClient.subscribe(stockSubscription);
});
},
model: function() {
// The model is provided by retrieving all the stored stockItems
return this.store.findAll('stockItem');
return $.getJSON('http://ift.tt/1o1DZk9?' +
'v=1.0&num=50&q=http://ift.tt/1LB4Te6?')
.then(function(data){
return data.responseData.feed.entries.map(function(entry){
var post = {};
post.title = entry.title;
return post;
});
});
},
});
Second app called as App
var App = Ember.Application.create({
rootElements: '#App'
});
App.ApplicationAdapter = DS.FixtureAdapter.extend({
modulePrefix: 'kontrollpanel', // TODO: loaded via config
Resolver: Resolver,
rootElements: '#App'
namespace: 'ember-crud'
});
Ember.EasyForm.Config.registerWrapper('bootstrap', {
formClass: '',
fieldErrorClass: 'has-error',
inputClass: 'form-group',
errorClass: 'help-block error',
hintClass: 'help-block',
labelClass: ''
});
App.Router.map(function() {
this.resource('products', function() {
this.route('new');
this.route('show', {path: '/:product_id'});
this.route('edit', {path: '/:product_id/edit'});
});
});
App.Product = DS.Model.extend(Ember.Validations.Mixin, {
name: DS.attr('string'),
email: DS.attr('string'),
number: DS.attr('number'),
// To identify html tag for a Product.
htmlID: function() {
return 'product' + this.get('id');
}.property('id'),
});
App.resetFixtures = function() {
App.Product.FIXTURES = [
{
id: 1,
name: 'pritesh',
email: 'pritesh@gmail.com',
number: 077778888
},
];
};
App.resetFixtures();
App.ProductsRoute = Ember.Route.extend({
model: function() {
return this.store.find('product');
},
actions: {
// Redirect to new form.
new: function() {
this.transitionTo('products.new');
},
// Redirect to edit form.
edit: function(product) {
this.transitionTo('products.edit', product);
},
// Save and transition to /products/:product_id only if validation passes.
save: function(product) {
var _this = this;
product.validate().then(function() {
product.save();
_this.transitionTo('products.show', product);
});
},
// Roll back and transition to /products/:product_id.
cancel: function(product) {
product.rollback();
this.transitionTo('products.show', product);
},
// Delete specified product.
delete: function(product) {
product.destroyRecord();
this.transitionTo('products');
}
}
});
App.ProductsController = Ember.ArrayController.extend({
productsCount: function() {
return this.get('model.length');
}.property('@each')
});
App.ProductsIndexRoute = Ember.Route.extend({
model: function() {
return this.modelFor('products');
}
});
App.ProductsIndexController = Ember.ArrayController.extend({
needs: ['products'],
sortProperties: ['name']
});
App.ProductsEditRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('product', params.product_id);
},
// Roll back if the user transitions away by clicking a link, clicking the
// browser's back button, or otherwise.
deactivate: function() {
var model = this.modelFor('products.edit');
if (model && model.get('isDirty') && !model.get('isSaving')) {
model.rollback();
}
}
});
App.ProductsNewRoute = Ember.Route.extend({
model: function() {
return this.store.createRecord('product');
},
isNew: true,
renderTemplate: function(controller, model) {
this.render('products.edit', {
controller: controller
});
},
// Roll back if the user transitions away by clicking a link, clicking the
// browser's back button, or otherwise.
deactivate: function() {
var model = this.modelFor('products.new');
if (model && model.get('isNew') && !model.get('isSaving')) {
model.destroyRecord();
}
}
});
Aucun commentaire:
Enregistrer un commentaire