i want to fetch a remote data, and this data is JSX template. i want to use this data to dynamic render html.
my code
var Input = require('./components/input.jsx')
var Button = require('./components/Button.jsx')
var Panel = require('./components/panel.jsx')
var Container = require('./components/container.jsx')
var Styles = require('./components/styles.jsx')
var Style = require('./components/style.jsx')
var LoadData = require('./lib/LoadData');
LoadData.load('life_nearby_food', function(string){
// string may be link "<Container><Layout orientation="vertical" width="fill" height="wrap">...</Layout></Container>" etc
var app = React.createClass({
render: function() {
return string;
}
});
});
Related
I am fairly new to Protractor and Page Objects. I am trying to get the header to show across multiple pages. I have a header_page.js and a header_spec.js. I can verify that the header is present once within the header_spec.js (which is presently only pointing to the home page). What I would like to do is call the test for the header each time I visit a page.
var HomePage = require('../pages/home_page.js');
var HeaderPage = require('../pages/header_page.js');
describe('When visiting a page'. function(){
var headerPage = new HeaderPage();
var inbox_page = new HomePage();
beforeEach(function () {
inbox_page.visit();
});
it('header menu selector should be present', function(){
header_menu = headerPage.hdr_menu;
header_menu.click();
expect('header_menu').not.toBe(null);
});
});
});
I am not sure how to call this test from page2_spec.js..page3_spec.js as each page is different but should all contain a header. I am trying to avoid code duplication and would like to avoid calling the "it" block from each page. Do I use a helper file or can I move the it block inside the header_page.js..currently looks like this:
module.exports = function(){
this.hdr_menu = element(by.css('#pick-group-btn'));
this.hdr_img = element(by.css('PeopleAdmin logo'));
}
you can call a test spec to other specs by wrapping your spec in a function and exporting it "requiring" that module So in your case you can export header_spec.js to other modules such as page2_spec.js or page3_spec.js by :
var HomePage = require('../pages/home_page.js');
var HeaderPage = require('../pages/header_page.js');
var commHeader = function(){
describe('When visiting a page'. function(){
var headerPage = new HeaderPage();
var inbox_page = new HomePage();
beforeEach(function () {
inbox_page.visit();
});
it('header menu selector should be present', function(){
header_menu = headerPage.hdr_menu;
header_menu.click();
expect('header_menu').not.toBe(null);
});
});
});
}
module.exports = commHeader;
Then in you page2_spec.js file you can import this module like this :
var commHeader = require('your path to spec/commHeader.js');
describe('When visiting page 2 validate Header first'. function(){
var headerTest = new commHeader();
headerTest.commHeader();
it('page 2 element validations', function(){
//here the page 2 test goes
});
});
});
I tried to create a leaflet legend using the 'ng-show' and 'ng-hide' attributes.
Unfortunately, the legend is not created on site load but on map load.
The attributes don't seem to work if they are added with javascript directly.
This code:
onAdd: function() {
var controlDiv = L.DomUtil.create('div', 'air-quality-legend');
controlDiv.setAttribute('ng-hide', 'true');
controlDiv.className = "airQualityIndex";
L.DomEvent
.addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
.addListener(controlDiv, 'click', L.DomEvent.preventDefault);
var table = document.createElement('table');
var tr = document.createElement('table');
var td = document.createElement('table');
td.innerHTML = "test";
tr.appendChild(td);
table.appendChild(tr);
controlDiv.appendChild(table);
return controlDiv;
}
Produces that output.
As described there is a table when there should not.
Is there any way to add 'ng-hide' or 'ng-show' via javascript on runtime?
Thank you for your help in advance.
You'll need to compile the DOM of your custom control. To do that, you'll need to inject $compile into your controller, then after having added the control to your map use the getContainer method on your control instance and run $compile on it and attach it to the scope:
Control:
L.Control.Custom = L.Control.extend({
onAdd: function () {
var container = L.DomUtil.create('div', 'leaflet-control-custom')
header = L.DomUtil.create('h1', 'leaflet-control-custom-header', container);
header.textContent = 'NG-Hide test';
header.setAttribute('ng-hide', 'hide');
return container;
}
});
Controller:
angular.module('app').controller('controller', [
'$scope', 'leaflet', '$compile',
function ($scope, leaflet, $compile) {
$scope.hide = false;
leaflet.map.then(function (map) {
var control = new L.Control.Custom().addTo(map);
$compile(control.getContainer())($scope);
});
}
]);
Here's a working example on Plunker: http://plnkr.co/edit/xzRwTp9OZ8Zp8v7ktt2c?p=preview
I have 3-levels of inheriting classes:
First class inherit ElementArrayFinder, Second class inherit first class. This is my code:
1-st class:
var util = require('util');
var ElementArrayFinder = require('C:/Users/Lilia.Sapurina/AppData/Roaming/npm/node_modules/protractor/lib/element').ElementArrayFinder;
var psComponent = function() {};
util.inherits(psComponent, ElementArrayFinder);
module.exports = psComponent;
2-nd class:
var util = require('util');
var psComponent = require('../lib/psComponent');
var psDateTimePicker = function() {};
util.inherits(psDateTimePicker, psComponent);
psDateTimePicker.prototype.getField = function() {
return element(by.xpath('//div[1]/table/tbody/tr[2]/td[1]/div/input'));
};
psDateTimePicker.prototype.getButton = function() {
return element(by.css('td > a.b-button.b-button_only_icon'));
};
exports.psDateTimePicker = new psDateTimePicker();
I can use it in my code in this way:
fdescribe('lala', function () {
var psDateTimePicker = require('../lib/psDateTimePicker').psDateTimePicker;
beforeEach(function(){
browser.get('ng-components/examples/ps-date-time-picker.html');
});
it('test', function () {
expect(psDateTimePicker.getField().getAttribute("value")).toEqual(6);
});
});
But I want to make global interface and make code construction looks like:
fdescribe('lala', function () {
var psComponents = require('../lib/psComponent');
beforeEach(function(){
browser.get('ng-components/examples/ps-date-time-picker.html');
});
it('test', function () {
expect(psComponents.psDateTimePicker.getField().getAttribute("value")).toEqual(6);
});
});
Does anybody know how I can organize it? I tried to use getInstanceOf(), but its not working. Also it isn't very conveniently.
If you want to create a namespace for all your components, you can just create an extra module responsible for that:
// psComponents.js
module.exports = {
psDateTimePicker: require('../lib/psDateTimePicker').psDateTimePicker,
psAnotherComponent: require('../lib/psAnotherComponent').psAnything
};
And use it pretty like the same you want:
var psComponents = require('../lib/psComponents');
expect(psComponents.psDateTimePicker.getField().getAttribute("value")).toEqual(6);
This is much simpler than what you've tried to do - trying to access children from a parent - there is no an easy way to achieve it and usually there is no reason to. Prototypes are just boilerplates to create new independent instances, which are not supposed to be connected to each other. Pretty much the same with prototype inheritance: you just extend that boilerplate, but child and parent instances a gonna remain independent.
Not entirely sure what you're looking for but maybe something along these line...?
var util = require('util');
var ElementArrayFinder = require('C:/Users/Lilia.Sapurina/AppData/Roaming/npm/node_modules/protractor/lib/element').ElementArrayFinder;
var psDateTimePicker = require('../lib/psDateTimePicker').psDateTimePicker;
var PsComponent = function() {};
util.inherits(PsComponent, ElementArrayFinder);
PsComponent.prototype = util;
PsComponent.prototype = psDateTimePicker;
module.exports = new PsComponent();
Then...
describe('lala', function () {
var psComponents = require('../lib/psComponents');
beforeEach(function(){
browser.get('ng-components/examples/ps-date-time-picker.html');
});
it('test', function() {
expect(psComponents.getField().getAttribute("value")).toEqual(6);
});
});
The below is a piece of code implemented on backbone.
new staffListViewN().render(qualifiedStaff,this.id);
I am getting error like
"String is not a function"
below is the implementation of the above render function.
staffListViewN = Backbone.View.extend({
el:'#staffs-list',
render:function(stafflistParam,id)
{
var stafflist = stafflistParam;
var ref = this;
if(validate.variable(stafflist))
{
agentList = {agentList:stafflist};
ref.$el.html(staffListTemplate);
}
}
});
I'm working on backbone website that uses disqus as its commenting system, I use backbone boilerplate, and I registered a module for the comment, I included in it the js provided by DISQUS
my module looks like this :
define([
'namespace',
'use!backbone'
], function(namespace, Backbone) {
var Comment = namespace.module();
Comment.Views.CommentView = Backbone.View.extend({
template: "app/tpl/comment/main.html",
render: function(done) {
var view = this;
namespace.fetchTemplate(this.template, function(tmpl) {
view.el.innerHTML = tmpl();
if (_.isFunction(done)) {
done(view.el);
}
});
},
commentScript: function() {
console.log('Comment Script INIT.');
var disqus_identifier = 'a unique identifier for each page where Disqus is present';
var disqus_title = 'a unique title for each page where Disqus is present';
var disqus_url = 'a unique URL for each page where Disqus is present';
var disqus_developer = 1;
var disqus_shortname = 'dandin95'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script');
dsq.type = 'text/javascript';
dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
}
});
return Comment;
});
my main.html only contain a div with id 'disqus_thread' that used view the comment box
My issue is : when rendering my view nothing done and chrome console shows
Uncaught TypeError: Cannot call method 'toLowerCase' of null embed.js:65
when adding this script to the template every thing working well.
Any advice ????
Basically, it looks like you are creating a backbone view to initialize and render the DISQUS widget within the #disqus_thread DIV and then re-render based on the state of the page:
define('disqus', [], function(){
var disqus_shortname = DISQUS_SHORTNAME,
disqus_identifer = INDEX_IDENT,
disqus_title = DISCOVERY_TITLE,
disqus_url = URL_HERE,
disqus_developer = '1'; // could be deprecated?
var DisqusView = Backbone.View.extend({
el: '#disqus_thread',
initialize: function() {
// DISQUS universal code:
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
},
render: function(options) {
DISQUS.reset({
options: options,
reload: true,
config: function(){
this.page.identifer = options.identifer;
this.page.title = options.title;
}
});
}
});
var disqusView = new DisqusView();
return disqusView;
});
OK! so lets make the assumption that the #disqus_thread element already exists on the page (hence setting el). When the module is loaded, DISQUS will do the initialization.
Say an event is fired off that requires the loading of a new Disqus thread:
$('.article_title').on('click', function(e) {
var $post = $(e.target).attr('id');
disqus.render({
identifier: $post, // OR however you decide to determine these attributes
title: $post
});
});
The iFrame within the #disqus_thread element will then be reloaded to the proper thread. This is a very thinly layered example, but imagine calling disqus.render({...}) within an events hash or router.
DISQUS Ajax Reset Snippet