Using Aurelia, I want to fill an <div> with contents of viewmodel property (lets call it htmlText) which contains html text, and I was using
<div>
${htmlText}
</div>
However, this encodes html so, instead of i.e. having paragraph or link, all tags are escaped so html can be seen as source.
Is there out of the box binder to do this?
You can accomplish this using the innerhtml binding like so:
<div innerhtml.bind="htmlText"></div>
Related
beginner question with Razor and tag helpers I'm afraid!
Using tag helpers in my razor html, I can e.g. write:
<div><date-picker id="datepicker" value="#DateTime.Now"></date-picker></div>
This will then generate the output
<input id="datepicker" class="datepicker" aria-atomic="true" aria-live="assertive" aria-expanded="false" role="combobox" name="datepicker" placeholder="Select date">
and so on. What I'd like to do is to append the output to other objects like dialog screens, which accept an html string to append.
e.g.
var customDesign = "<div id="something"><date-picker id="datepicker" value="#DateTime.Now"></date-picker></div>";
$(".myDialogfield").after(customDesign);
This doesn't work in Razor - I've tried various things like creating this as a HTML.Raw string first and injecting it as a variable etc - is there a way I can use the output from my tag helper within a script section?
Thanks for any hints!
You can't do it that way. TagHelpers are interpreted. In other words, Razor must see them as actual tags in order to replace them. Here, it's just a JS string, and Razor will not mess with that.
Your best bet would likely to be some sort of JavaScript templating system, but generally speaking you could still get what you want manually via a different path. Instead of hardcoding a string of HTML, include the TagHelper in a script block of type text/html:
<script type="text/html" id="MyTemplate">
<date-picker id="datepicker" value="#DateTime.Now"></date-picker>
</script>
Then, in your JavaScript, you can select this script tag and get its content:
var customDesign = $('#MyTemplate').html();
$(".myDialogfield").after(customDesign);
Actually the question is in the subj...
Is it possible to make handlebars template framework, to recognize templates within a div tag and not in script tag?
For example I would like to create template with this markup:
<style>
div.text-x-handlebars {display:none;}
</style>
<div class="text-x-handlebars-template">
<h2>I'm template</h2>
<p>{{welcomeMessage}}</p>
</div>
Yes you can put your templates in <div>s rather than <script>s, for example:
http://jsfiddle.net/ambiguous/RucqP/
However, doing so is fraught with danger. If you put your template inside a <div> then the browser will interpret it as HTML before you've filled it in; so, if your template's HTML isn't valid until after it has been filled in, the browser may attempt to correct it and make a mess of things. Also, if you have id attributes in your templates, then you will end up with duplicate ids (one in the template <div> and a repeat in the filled in template that you put in the DOM) and that will cause all sorts of strange and interesting bugs. The browser will also try to download any images inside the templates in a <div>, this may or may not be a problem (if might even be desirable but probably not desirable if the image uses a template variable in its src attribute).
Basically, you can do it but you shouldn't, you should put your templates in <script id="..." type="text/x-handlebars-template"> elements instead.
I want to create a reusable ajax control in MVC .NET using RAZOR.
my example is a simple ajax text box and list where the user filters the list by typing in the text box. on the first call i would render both the text box and the list using my razor view. on subsequent AJAX calls i would want to ONLY render the (now filtered) list.
idea 1: use #if statement to conditionally render code.
problem: razor does not seem to like conditionally written html. for example it errors when a <div> tag is not followed by a closing </div>.
idea 2: use #section tokens to create portions of my control and then call RenderSection within the same file as needed.
problem: razor does not allow RenderSection to call sections in the same page
i know i can conditionally render html as strings, but i wanted to take advantage of the legibility of the razor markup and keep with development protocols.
You should be able to output <div> tags in a Razor block without the corresponding </div> tag by surrounding it with <text>. The reason is that Razor uses the closing tag to know when to drag back into code-parsing mode:
#if (myCondition)
{
<text>
<div>
</text>
}
As for the Section stuff, you might be able to achieve what you want using Templated Razor Delegates, like this:
#{
Func<dynamic, object> b = #<strong>#item</strong>;
}
// ...
<span>This sentence is #b("In Bold").</span>
See Phil Haack's blog for a little more on this.
I'm trying to wrap content with some static HTML in MVC and I'm not having any luck figuring this out. There must be an obvious solution that I'm not seeing, as this would seem like a desired feature.
In my View, I need to wrap HTML content with something:
<uc1:mc>
<p>Hello World!</p>
</uc1:mc>
That will render like:
<div class="ribbon">
<div class="left"></div>
<p>Hello World!</p>
<div class="right"></div>
</div>
With a Template like:
<div class="ribbon">
<div class="left"></div>
<%= IncomingMarkupGoesHere %>
<div class="right"></div>
</div>
The idea is to reuse html that wraps around other html.
I'm currently using two User Controls to achieve this, one with everything before and the other with everything after. Something like this:
<% Html.RenderPartial("RightRibbon_Start"); %>
Target Content...
<% Html.RenderPartial("RightRibbon_End"); %>
But this seems sloppy and isn't conducive to passing parameters that apply to HTML before and after the target content.
It's important that the content to be wrapped be allow to be written as multiple lined markup and not just a string, otherwise I would just pass the content as the Model.
What about creating helpers and passing the HTML in as an argument?
Passing html markup into an ASP.NET User Control
For a page which has multiple DIVs, how to just fetch content from DIVs that contain useful text and avoid other DIVs that are for ads, etc.
For example, a page structure like this:
...
<div id="articlecopy">
<div class="advertising 1">Ads I do not want to fetch.</div>
<p>Useful texts go here</p>
<div class="advertising 2">Ads I do not want to fetch.</div>
<div class="related_articles_list">I do not want to read related articles so parse this part too</div>
</div>
...
In this fictional example, I want get rid of the two DIVs for advertising and the DIV for related articles. All I want is to fetch the useful content in inside the parent DIV.
Can Pipe do this?
Thank you.
Try the YQL module with xpath. Something along these lines:
SELECT * from html where url="http://MyWebPageWithAds.com" and xpath='//div/p'
The above query will retrieve the part of the html inside the <p> tag under the parent <div> tag. You can get fancy with xpath if your DIVs have attributes.
Say for example you had a page with several DIVs, but the one you wanted looked like this:
<div>
<div>Stuff I don't want</div>
<div class="main_content">Stuff I want to add to my feed</div>
<div>Other stuff I don't want</div>
</div>
You would change the YQL string above to this:
SELECT * from html where url="http://MyWebPageWithAds.com"
and xpath='//div/div[contains(#class,"main_content")]'
I've only recently discovered YQL myself, and am fairly new to using xpaths, but it has worked for me so far.