Is it possible to have custom html/javascript in Sproutcore?
I have to use some code from a cloud service provider.
Yes, this is rather easy. In your view you can define a render() method:
App.myView = SC.View.extend({
render: function(context, firstTime) {
var someValue = `getValue`
context.push(
"<span class='mySpan'>", someValue, "</span>",
"Any Other html/javascript that you want, can go here."
);
}
})
You can also use the firstTime property to know if you are rendering the first time (put out everything), or just updating the existing code.
You can find out more:
http://guides.sproutcore.com/views.html#the-render-and-update-methods
http://frozencanuck.wordpress.com/2009/08/14/creating-a-simple-custom-view-in-sproutcore-part1/
Related
I have use case where I need to change sub grid url anyone knows how to do that. I tried solution given at Dynamically Change the Grid Options in angular ui.grid
,but its not working for sub grid.
Other option left is to use two grids, if anyone knows answer using single grid that would be great help. Thanks
I managed to do above by some work around like this -
Use the grid option like this
var handler = handler1; // Initially url1 will be used for subgrid
handler1 = function(row){if (row.isExpanded) { ... }} // Use url1
handler2 = function(row){if (row.isExpanded) { ... }} // Use url2
$scope.gridOption = {
...
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
gridApi.expandable.on.rowExpandedStateChanged($scope, function(row) {
handler(row)
}
)}}
Then change the 'handler' variable to 'handler2' or 'handler1' based on flow.
handler = handler2; // url2 will be used now for subgrid
I have searched the web for the past hour for a solution. I want to achieve the following hover-behavior on iOS.
1st tap -> hover on
2nd tap -> hover off
This will mainly be used to present images.
Because of the CSS tag I assume you want to do this in HTML.
This is almost impossible to do without javascript. You could add a click event handler that toggles the .hover class. For example (untested code, don't copy-paste ;)
element.addEventListener('click', function(evt) {
if (this.className == 'hover') {
this.className = 'hover';
} else {
this.className = '';
}
});
If you have other classes on the document it's probably easier to use a JS framework, e.g. jQuery (again untested):
jQuery(element).click(function(evt) {
jQuery(this).toggleClass('hover');
});
I am trying to create a bootstrapped firefox extension to obtain current tabs url and title. The issue is that I want to check when the tab url has the word "about:" in its url. The solution that I propose is to check the require("sdk/tabs").activeTab.url" using the browsers native string.substr() javascript function. Is any posibility to use browsers native javasript functions on widget or ToolbarButton onClick method?
exports.main = function(options) {
var base64 = require("sdk/base64");
var panel = require("sdk/panel").Panel({
width: 700,
height: 470,
onHide: function ()
{
panel.contentURL = "about:blank";
}
});
var tbb = require("toolbarbutton").ToolbarButton({
id: "extension-tbb-id",
label: "IFShare+",
image: "https://www.fasdfasd.es/factory/templates/templateforidkreader/favicon.ico",
panel: panel,
onClick: function()
{
windowPanel = require("sdk/tabs").activeTab;
title = windowPanel.title;
url = windowPanel.url;
// Is any posibility to do something like that ????
contentScript: "if("+url+".substring(0,5)=='about:'){"
{
url='';
title='';
}
contentScript: "}"
this.panel.contentURL = "https://www.fasdfasdf.es/factory/index2.php?option=com_idkreader&view=shareplus&task=window&Itemid=0&url="+base64.encode(url, "utf-8")+'&title='+base64.encode(title, "utf-8")+'&ref=ext';
},
});
// move the toolbar button to the navigation bar
if ("install" == options.loadReason) {
tbb.moveTo({toolbarID: "nav-bar"});
}
}
I'm not entirely clear on the details of what you're trying to accomplish, but I think you're close.
To answer the question as asked, no you can't access variables from within a content script. The best you can do is use content script messaging a mentioned in the page-mod documentation.
However, to accomplish what you want, you don't need to do this. You can just do what you want in the onClick function itself, like so
function onClick()
{
windowPanel = require("sdk/tabs").activeTab;
title = windowPanel.title;
url = windowPanel.url;
if(url.substring(0,5)=='about:'){
{
url='';
title='';
} else {
//You can insert any content script stuff you want here
}
this.panel.contentURL = "https://www.fasdfasdf.es/factory/index2.php?option=com_idkreader&view=shareplus&task=window&Itemid=0&url="+base64.encode(url, "utf-8")+'&title='+base64.encode(title, "utf-8")+'&ref=ext';
}
If you refine your question a bit, I will be happy to refine my answer.
I'm stuck on one particular part of my project which consists of the components mentioned in the title.
I currently have a proof of concept that works the way I want it to work:
Sammy is integrated into the knockout viewmodels (as per the tutorial
on the knockout site)
the views are loaded on demand by a controller
(so I don't have to define every single view on the application page)
In my current situation I instance the viewmodels when the application starts (if I don't instance them, Sammy will not handle the routing). The problem is where the view is loaded and swapped by Sammy. I have to make a call to ko.applyBindings for KO to bind to the view. But its bad practice to repeatedly call applybingings.
My question, how do I bind to my views that are loaded on demand? I can't call ko.applybindings since that would create a memoryleak when the view is loaded more than once.
Here is an example VM with the offending ko.applyBindings:
function serviceInfoVm() {
var self = this;
self.ObjectKey = ko.observable();
self.Service = ko.observable();
self.LoadService = function () {
$.get('ServiceData/Detail', { serviceId: self.ObjectKey() }, function (data) {
self.Service(data);
});
};
$.sammy('#content', function () {
this.get('#/service/:id', function (context) {
var ctx = context;
self.ObjectKey(this.params['id']);
self.LoadService();
$.get('Content/ServiceInfo', function (view) {
ctx.app.swap(view);
ko.applyBindings(self);
});
});
}).run();
};
Anyone with some pointers and/or solutions to this problem?
You have the Sammy code in the viewmodel, which can work great if that viewmodel will be present and you want sub viewmodels and views to be loaded. So I assume that is what you are trying to do. Food for thought ... separate the sammy code into its own module (I call mine router in router.js) and let it manage the navigation separate from any viewmodel.
But back to your code ... you could set up your subviews and subviewmodels and use applybindings on them prior to the sammy.get being called. Basically, you are registering your routes in advance. Then the sammy.get just navigates to the new view, which is already data bound.
Not a solution but another approach:
Ended up abandoning the idea of loading the views dynamically.
Now my views are always present in the page and the visibility is triggered by this code:
var app = function () {
var self = this;
self.State = ko.observable('home');
self.Home = ko.observable(new homepageVm());
self.User = ko.observable(new userInfoVm());
$.sammy(function () {
this.get('#/', function (context) {
self.State('home');
});
this.get('#/info/:username', function (context) {
self.State('user');
self.User().UserName(context.params['username']);
self.User().LoadInfo();
});
}).run();
};
And the div visibility is triggered this way:
<div id="homeView" data-bind="with: Home, visible: State() === 'home'">
This way the ko.applyBindings only needs to be called once when the app starts.
The viewmodel above is bound to our shell page.
More on this here
Calling applyBindings on the specific element in the returned template is an option:
ko.applyBindings(viewModel, htmlNode)
Also see this question with regard to lazy loading templates: knockout.js - lazy loading of templates
And docs here for applyBindings: http://knockoutjs.com/documentation/observables.html
I am probably missing something obvious, but I'm new to Prototype, coming from jQuery. I have a link created using link_to and remote=>true that output an AJAX link that is working.
Here is the JS I have:
Event.observe(window, 'load', function() {
$$('.checkoff-link').each(function(element) {
element.observe('ajax:success', successfulCheckOff);
});
});
// when they tick it off, check it off
function successfulCheckOff(e) {
// shrink and strike out the text
var element = e.element();
var label = $(getLabelIdFromLinkId(element.id));
label.addClassName('strikeout');
}
How do I get the responseText of the ajax request? I'm trying to pass data back from my controller on success, and I don't know how to capture it in the JS tier.
I figured this out using this handy tutorial:
https://github.com/rails/prototype-ujs
Essentially, all of the response information is stored in event.memo, so you can use code like this:
var response = e.memo;
To then access everything you need.
And you can get the HTML/Text/JSON from the response using the responseText method:
var html_return = e.memo.responseText;