I am very new (started today) to Ember and cannot figure how how to set this up in a correct manner.
Models:
Post, Comment
On the 'show' template for Post, I want to display only the comments that are not blocked (isBlocked is a attribute of Comment model). Should I use a View and pass in a param to filter out the comments?
I cannot find an useful example or tutorial that explains this. Is there a way similar to how this would be done in Rails with partials and locals or something?
You can use a computed property that uses filterProperty to filter your model inside your controller. Then use that computed property to display in your template.
Assuming your Comment model has an isBlocked attribute, you can set up a computed property like,
comments: function() {
return this.filterProperty('isBlocked', false);
}.property('#each.isBlocked')
Then in the template use comments as the collection to iterate over. The comments collection will have all comments except those where isBlocked is true.
Related
I am trying to make a NameValueList collection editable with GlassMapper and I don't seem to be able to get to the bottom of this.
We have a list of validations that can be attached to a field and I would like to have the validation message editable in ExperienceEditor.
The collection is pre-processed when GlassMapper is retrieving the item:
Validations = glassItem.GetValidations();
#foreach(Validation validation in Model.Validations)
{
<div id="#validation.Identifier" ng-message="#validation.AngularKey" ng-cloak class="mtg-validation-msg">
#Html.Glass().Editable(validation, e => e.ErrorMessage)
</div>
}
Error that I am getting:
Failed item resolve - You cannot save a class that does not contain a property that represents the item ID. Ensure that at least one property has been marked to contain the Sitecore ID. Type: MyAssembly.Models.Validation
It is not possible to directly edit certain types of complex fields in the Experience Editor, such as Treelist, Multilist or Name Value Collection.
Instead, you should set up and use an Edit Frame. This will pop up a modal dialog allowing you to edit the field, it is not inline but means you do not need to leave the Experience Editor. This is the recommended approach to this problem.
Since you are using Glass Mapper, since version 4 you can declare Edit Frames all directly from code and now have to declare/set them up in the Core database first.
#if (Sitecore.Context.PageMode.IsExperienceEditor)
{
using (Html.Glass().BeginEditFrame(Model, "Edit", x => x.Validations))
{
<div>Edit Validations</div>
}
}
You might be interested in this blog post I wrote about adding a wrapper around the Edit Frame to make the UX more friendly.
Suppose I have a computed property on a view:
TestView=Ember.View.extend({
computedProperty:function(){
return this.get("elementId")+"test"
}.property("targetObject.{{elementId goes here}}")
})
I want to make the property depend on the model property with the attribute name equivalent to the id on that view element. However, I haven't found an elegant way to do this. I need to do this to make my code as general as possible. My solution so far is to make the property dependent on targetObject's id and then call object.notifyPropertyChange(id) whenever I need binding to update.
To add some clarity. Suppose I have a view that displays a number that is bound to a property on the model. However, I want the number to be formatted with commas when it is displayed. I could easily write a computed property for each possible attribute that will do the formatting. Instead though, I just want a generic view that will know to take the value of the attribute of the model with the same name as the view's elementId property. Here is an example of my hacky solution:
TestView=Ember.View.extend({
computedProperty:function(){
var id=this.get("elementId")
return addCommas(this.get("targetObject").get(id))
}.property("id")
})
I then call:
object.notifyPropertyChange(id) whenever one of the attributes on the model changes. It works and achieves my goals but I was looking for a more elegant solution.
In the view the formatted value is displayed in an custom textfield.
{{view App.CustomTextField value=computedProperty id="someAttribute}}
Just use a helper which formats numbers with commas. You don't need any properties, computed or otherwise.
test.hbs
Hello, I am a formatted {{add-commas number}}.
helpers/add-commas.js
Ember.Handlebars.helper('add-commas', function(value) {
return value.toLocaleString();
});
I'm trying to create a website with articles. I have a page that displays a list of all the articles, and I try to do one that displays the detail of an article. I use angular.js to get the json of my datas. I don't have any problem to get the list of my articles since I only need to do :
function ArticleListCtrl($scope, $http) {
$http.get('/articles/?format=json').success(function(data) {
$scope.articles = data;
});
}
But now I only want to access for example the article with id 4. How do I do that ? Is there a way to inject the primary key entered in the url into the javascript ? I'm new to angular, and I'm pretty sure there is an easy way!
If I understand correctly, what you need is to define a partial template and a route,
for the detail view of your article.
An example is here
More specifically what you'd need is something like the following.
angular.module('myapp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/articles/:articleId', {templateUrl: 'partials/article-detail.html', controller: ArticleDetailCtrl}).
otherwise({redirectTo: '/articles'});
}]);
What the above does, is to hijack urls of the form /articles/5/ and instead of actually
performing that GET request to your server, it will just ask for partials/article-detail.html. This of course will be your article detail template, which will be handled
by your ArticleDetailCrtl controller.
In your ArticleDetailCrtl controller function, don't forget to include the $routeParams
service. This will give you access to the url parameters, such as articleId, which we
defined above.
The final thing to do is to generate these links in your article list template. e.g:
<ul>
<li ng-repeat="article in articles">{{article.title}}
</ul>
How can i render a field or image from template in my Partial View. I need to edit content by the Page Editor.
There are a couple of ways to do this but at the most basic level, you can render a field in your partial view by using the following syntax:
#Html.Sitecore().Field("myFieldName")
I recommend checking out John West's blog for more MVC-related tips: http://www.sitecore.net/Community/Technical-Blogs/John-West-Sitecore-Blog/Posts/2012/06/Posts-about-Using-MVC-with-the-Sitecore-ASPNET-CMS.aspx
There is also documentation on Sitecore's SDN site: http://sdn.sitecore.net/Reference/Sitecore%206/MVC%20Reference.aspx
Access the value of your Field By using FieldRenderer.Render and Render it in the View #Html.Raw(Model.Urfieldname). This will work.
Thanks
I have a list_filter with loads of sectors. This list, on the right side of the page, is too long.
Can I use an input select field instead since I can't choose more than one sector?
I have seen this before, screenshots, but I can not find the way to do this.
edit:
I have a custom FilterSpec not a list_filter
You can write your own custom FilterSpec (custom admin list filter).
This feature is not part of the Django code yet; it is planned for version 1.2. You'll need to apply this patch to the Django code: http://code.djangoproject.com/ticket/5833.
There are many examples on stackoverflow on how to do that, e.g: https://stackoverflow.com/a/1294952/342473.
http://lincolnloop.com/blog/2011/jan/11/custom-filters-django-admin/
The long list that you said comes from the default template 'admin/filter.html', in django/contrib/admin/templates/admin/filter.html, of builtin ListFilters.
There are several ways to customize it:
Globally override 'admin/filter.html'. Render select tag instead of ul tag if the count of choices hit certain limit. This affects all list filters in admin. The select tag should have onchange event handler like
<select ... onchange="location.href=this.options[this.selectedIndex].value">
Set template attribute in your specific ListFilter instance, to the name of the customized filter template. The content of the template is like #1. Django 1.4+ is required for this.
Add javascript in the ModelAdmin instance to convert HTML content inside the ul tag to select tag as soon as DOM has been fully loaded.
This is how i resolved it (jQuery):
$('#changelist-filter ul').each(function(){
var maxlength = 10;
if ($(this).children().length > maxlength )
{
var list=$(this),
select=$(document.createElement('select')).insertBefore($(this).hide());
$('>li a', this).each(function(){
console.log($(this).parent().attr('class'));
var target=$(this).attr('target'),
option=$(document.createElement('option'))
.appendTo(select)
.val(this.href)
.attr('selected', $(this).parent().attr('class'))
.html($(this).html())
.click(function(){
if (target==='_blank'){
window.open($(this).val());
}
else{
window.location.href=$(this).val();
}
});
});
list.remove();
}
});