I'm using the riot for the system. but I have a problem using the common tag in every place. because I have to copy the all common tag each page.
I added all tags like this. Does anyone have the solution for this ?
<st-service>
<st-alert></st-alert>
<st-header></st-header>
<st-body></st-body>
<st-footer></st-footer>
</st-service>
<st-profile>
<st-alert></st-alert>
<st-header></st-header>
<st-body></st-body>
<st-footer></st-footer>
</st-profile>
I found a solution, I'm using this method to handle these common tags. like this
<st-common>
<st-alert></st-alert>
<st-header></st-header>
<yeild></yeild>
<st-footer></st-footer>
</st-common>
service-page.tag // page
<st-service-page>
<st-common>
<st-service></st-service>
</st-common>
<st-service-page>
profile-page.tag // page
<st-profile-page>
<st-common>
<st-profile></st-profile>
</st-common>
<st-profile-page>
service-view.tag
<st-service>
// html / code body related to module
</st-service>
profile-view.tag
<st-profile>
// html / code body related to module
</st-profile>
If needed in details about this I can explain.
I'd have to know more about how you're routing to say for sure, but I think you should avoid using a different outer tag for each page. If your HTML looks something like this:
<body>
<st-app />
<script>
const pages = {
"/": "st-home",
"/about/": "st-about",
}
const content_tag = pages[window.location.pathname] || "st-notfound"
riot.mount("st-app", {
content_tag: content_tag
})
</script>
</body>
Then <st-app> would be defined something like:
<st-app>
<st-alert></st-alert>
<st-header></st-header>
<div data-is={this.opts.content_page}></div>
<st-footer></st-footer>
</st-app>
The important thing here being that you're controlling which tag should be used via the data-is attribute and the mounting options for <st-app>. In this example <st-home>, <st-about>, and <st-notfound> are riot components defined elsewhere.
Related
https://qiita.com/munieru_jp/items/d7e9f98b5ab5960e7a93
If you do as above, you can get the contents of {{$ t ('HELLO_WORLD')}} in the <template> tag.
How can I get {{$ t ('HELLO_WORLD')}} in the <script> tag in the same file?
The reason is that I want to manage title descriptions and og related items with head.
We apologize for the inconvenience, but we would appreciate it if you could teach us.
Then thank you.
You have access to the nuxt-i18n translation helper in the script of your page with this.$t and the head method on the other hand has access to the this context.
So you could do something like this:
export default {
head () {
return {
title: this.$t('HELLO_WORLD')
}
}
}
Use the head method to set the HTML Head tags for the current page.
https://nuxtjs.org/api/pages-head/
script src(api key) of google map should loaded only once when page get loaded
index.html
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=apikey" async= "true"></script>
.ts file
const script = document.createElement('script');
script.id = 'googleMap';
console.log(script,'script')
if (this.apiKey) {
script.src = 'https://maps.googleapis.com/maps/api/js?key=' +
this.apiKey;
console.log(script.src,'script.src')
}
else {
script.src = 'https://maps.googleapis.com/maps/api/js?key=';
}
document.head.appendChild(script);
What do you have the snippet in the .ts file for if you are already placing it manually in the main html file?
Try removing that.
If not then please give some more details about where your const script =... snippet is actually in the app. It must be in a place where it's getting called more than once?
Update
Based on your comments you saying that you have removed the script example that you posted but it is still including it multiple times.
This sounds like you haven't put you <script> tag within your <head> tag. If it is inside something that repeats then it would repeat.
If this doesn't solve your problem then please reword your question to include better snippets and more clarity of what your current set up is, otherwise we can only guess at what it could be.
I have a page with a route in the form : :client_id/tarif/:tarif_name
in the corresponding HTML page, I have a <%= collection_select(.....:tarif_name...) which enables to select the name of the tarif to be shown. That works.
How do I instruct to reload the page with the new :tarif_name parameter in the url ?
I thought of using the :onchange option helper with collection_select, but although I managed to execute javascript this way, I find no example of composing and triggering the loading of a url through that option.
Thank you very much for your help
If you are able to run javascript code in the :onchange, then window.location.href = "your_url" will make the redirect.
You will also need the selected value. Your onchange will be something like
function() {
window.location.href = "your_url" + this.value
}
I have 10 links to 10 TagPages, when clicked they take you to a page with all the posts with that tag.
That’s easy enough.
I’d like to know if its possible to stack more than one tagged post in a page. For example when all the “red” tagged posts are showing you can click and load in the “blue” tagged posts without leaving the page.
The 10 links then behave like a filtering system. You can then show any combination of tagged posts in one page… click once and load them in, click again to hide the posts.
I hope that all makes sense.
Any help would be great. Thanks.
You can load in posts by tag with Tumblr's API: http://www.tumblr.com/docs/en/api/v2#posts
The call for each of your tags would look something like this (square brackets marking areas you'll need to change):
URL = http://api.tumblr.com/v2/blog/[base-hostname]/posts?api_key=[key]&tag=[tagname]&jsonp=?
$.ajax(URL, {
type: 'GET',
dataType: 'json',
success: function(data) {
// do something with your data
}
});
Updated with a more specific example:
You'd need to create a function for each click of your tag navigation. So let's say you built out your navigation in simple HTML, you'd want to create a function for each of those clicks.
HMTL:
<nav class="tag-nav>
<ul>
<li>Portrait</li>
<li>Landscape</li>
</ul>
</nav>
JS:
$('.tag-nav a').on('click', function (e) {
e.preventDefault();
// grab classname from the link that was just clicked
var tagName = $(this).attr('class');
// go get our tagged posts
getTaggedPosts(tagName);
});
var getTaggedPosts = function (tag) {
// this is where your AJAX call will go
// bonus points if you check to see if you've already made the AJAX call
// and stored the posts somewhere else on the page
};
I've spent a lot of time digging into sprockets' and tit's source code, trying to figure out how to pass variables / bindings to the Erb evaluation context. Here's what I'm trying to do: I need to serve a JS file whose contents change on a per-request basis. The portions that change depend on data stored in the DB, hence the need to route requests through the Rails app and the need to pass variables / bindings. On top of that the JS file uses the require directives to insert other JS files, hence the need to use sprockets.
Here's the code snippet that isn't working:
Controller file:
def ever_changing_js
#foobars = Foobar.all
MyApp::Application.assets.instance_eval do
def foobars
#foobars
end
end
render :text => MyApp::Application.assets.find_asset('ever_changing.js').to_s, :content_type => "application/javascript"
end
ever_changing.js:
//= require file1.js
//= require file2.js
// Some code that uses #foobars
How can I get this done? Any help would be appreciated.
JavaScript files should be completely static; Sprockets is not meant to do what you are trying to do.
Any data that changes on a per-request basis should be written to a <script> tag at the bottom of the template you are rendering.
app/assets/javascripts/user.js
(function(exports) {
function User(name) {
this.name = name;
}
User.prototype.speak() {
console.log(this.name + ' says, "Hello!"');
};
exports.User = User;
})(this);
app/views/users/show.html.erb
...
<%= javascript_include_tag('user') %>
<script>
(function() {
var user = new User(<%= #user.name %>);
$('#speak-button').click(function() {
user.speak();
});
})();
</script>
</html>
If you can give more context around your specific use case, I can give a more specific example.
I am trying to accomplish the same thing you are. I see a couple problems with your controller code snippet. Rather than doing an instance_eval on the Sprockets::Environment, you should class_eval the context_class, as shown in the Sprockets::Context documentation.
MyApp::Application.assets.context_class.class_eval do
def foobars
#foobars
end
end
Then foobars will be available to your ERb template.
As a sidenote, you can do
render js: MyApp::Application.assets.find_asset('ever_changing.js').to_s
instead of setting the content type yourself.