I have an emberJS object, viewed by an editablefield view, in order to be able to edit it with bindings.
I modify the view in order to be able to replace links in the text.
My problem is that if I use the inside views (Zs.RealValue) render function, it won't refresh on each update, like the simple {{value}} would do, only if I erase the text and after erase the first change.
I have a simple example here:
Steps to do: double click on one of the edit fields, the edit box appears, try modify the value, you will see, that the simple view is being updated, but not the other text view.
http://jsfiddle.net/symunona/hCjEc/7/
The problem appears because you try to implement the render function yourself in RealValue. If you change RealValue to just this:
Zs.RealValue = Ember.View.extend({
template: Ember.Handlebars.compile("{{value}}")
});
then the example works.
Related
I have a bootstrap modal that will display info about a parent document. The modal then has next/prev buttons that can rotate around a list of parent documents and reactively change the info displayed on the modal. It does this by simply changing a ReactiveVar of the current parent's onClick of next/prev. This works like a charm.
My problem is that each parent shows some child data as well. The child data is an array of embedded documents. And each document's property has some HTML inputs. I'm trying to pre-populate the values of the html inputs. However, I'm finding this does not work. id and foo are properties on the child document(s).
A call to {{parent}} is a Helper method that returns the current parent from MiniMongo. This seems to work fine as the parent's metadata changes reactively.
{{#each parent.childrenArray}}
<input type="text" id="{{id}}" value="{{foo}}">
{{/each}}
So the issue is that the HTML value does not change. Clicking next will still show the old child's value. I understand there's no reactivity for embedded documents and I'm sure this is the problem. Strangely, upon inspecting, I am in fact seeing the input's id being changed though. Does anybody know the solution to this? Thanks!
This seems to happen when I try to save the children back to the DB. I.e. hitting next/prev should save whatever value users puts into the HTML input before moving on to the next Parent and pre-loading its children
If parent is a helper, then I don't think you can use the subscript notation to get its properties, at least not reactively. However you should be able to use this instead:
{{#with parent}}
{{#each childrenArray}}
<input {{attributes}}>
{{/each}}
{{/with}}
Update: The other thing that is probably required is to use an attribute helper. I've also updated the code above to use this.
Template.yourTemplateName.helpers({
attributes() {
return {
type: 'text',
id: this.id,
value: this.foo
};
}
});
Update 2:
Working "offline" in a git repo by the OP I realized that the modal body was better done as a separate template, such that the data context for that template would change reactively. The part of the code that was at odds is not represented in the question, so read this question and answer with a grain of salt.
I am new to angular. i wanted to change the page content dynamically or may be show a new component with new content in it. i have cards on my website. please refer to the link
Cards
i want, to change the content of the page and show different content on each button clicked on card. i have already created a method and what to right in it.?
Component.html
Go somewhere
component.ts
onFirstClick() {
}
Do i need to create a new component to show new content. what should i do? please help
Well depends on what you want to change dynamically, but Angular is really good in it anyhow. For example, if you want to switch the text of the button on the first click you could do:
component.ts:
buttonTxt: string = 'Click me';
onFirstClick() {
this.buttonTxt = 'Button Clicked';
}
component.html:
{{buttonTxt}}
Changing dynamically what's on the page is the kind of thing angular is good and there are a bunch of different ways: ngIf*(Hide or show html component according to boolean variable on ts) and much more.
You can read a bit more about it here: https://medium.com/#DenysVuika/dynamic-content-in-angular-2-3c85023d9c36
I have a SPA in Angular Material which is displaying an mdToolbar element with a hamburger menu + left sidenav. That menu at the moment resides in my index.html where I have also set-up a <ui-view> element to render the view.
Now I have a view with a mdList in it. When the user selects some items, I want a delete icon to appear in the toolbar. That delete icon should be linked to the delete action of my controller which is of course specific to the view loaded, not to index.html.
I want to know what a recommended pattern for this would be. I can think of some ways to do it, but those are ugly. I was thinking in the direction of being able to have some placeholder area in the toolbar which I can replace with contents from my view, where the element actions (ngClick) are linked to the actions of the view controller. Does anyone know a good tutorial or codepen-like example of how to do this?
Update
I've now got something implemented that I'm happy with, but it's not quite there yet. What I did is create a menuService which is injected in the controller behind my menu (it's not a separate view, could be but doesn't make a difference in this scenario). The menu controller binds to this service and other services can inject stuff in it. In my test scenario, I inject a string which is then displayed in the toolbar, all ok.
The only thing I now need to do is instead of a string, inject a button with an event handler which goes back to the controller of the view. I'm not quite certain how to do that yet.
Another update
So I created this class:
export class CommandButton {
svgSrc: string;
click: () => void;
}
which I can inject into my menuService and then binds to the menu controller. Works fine for the icon (the button appears) but as one might expect (I did), the click function doesn't work. I set this in the view controller as follows:
var deleteButton = new Services.CommandButton();
deleteButton.svgSrc = 'icons/ic_delete_24px.svg';
deleteButton.click = this.deleteLogs;
this.menuService.setButtons([deleteButton]);
And the code for this.deleteLogs is simply:
deleteLogs() {
console.log('deleting logs');
}
Code for the buttons:
<div ng-repeat="button in ctrl.buttons">
<md-button ng-click="button.click">
<md-icon md-svg-src="{{button.svgSrc}}" class="md-icon md-24"></md-icon>
</md-button>
</div>
What I hoped for is that this would trigger the deleteLogs method in the view controller, but that's not the case. I need data from the view as that is where the items are selected. As far as I can see there's just nothing happening so the binding fails somewhere. What would be a good way to make sure the click event makes to to the view controller function? I could do a $rootscope.$broadcast but that feels hacky.
Last update
Never mind, I found my own bug. The binding of the event was incorrect, should have been (note the parenthesis):
<md-button ng-click="button.click()">
In the meantime I've figured out a nice way to do this. The post itself now also contains the answer.
I want to use angular inside of a Yii view because of its data binding.
I copy/pasted the exact code to jsfiddle and it works like a charm: http://jsfiddle.net/9wd9msgh/
Inside my Yii view the initial value from the controller is loaded, but it is not updated when changing the value inside of the input field
I'm including the javascript files from the view like this:
Yii::app()->clientScript->registerScriptFile( Yii::app()->baseUrl.'../javascript/angular1.2.26.min.js' );
Yii::app()->clientScript->registerScriptFile( Yii::app()->baseUrl.'../javascript/checklist.js' );
Does anyone have an idea what is wrong?
I am trying to use JSViews to make a dynamic ui. I want to have radio buttons that hide/show different parts of the ui, and have the radio button be bound to my data.
Creating and binding the radio buttons works ok, but I am stuck on the next part. I tried using an {{if}} to show different parts of the ui based on the same value that is driving the radio buttons. It shows the correct ui based on the initial value, but when I change the radio button, the if doesn't evaluate with the new value.
Here is a jsfiddle that shows what I have so far.
The part that doesn't work the way I want is
template += '{{if dynamic}}';
template += 'dynamic';
template += '{{else}}';
template += 'static';
template += '{{/if}}';
template += "</div>";
Is it even possible to do what I want with jsviews? I am trying to get rid of a bunch of code that was handling all the clicks and hiding and showing manually.
Ok, so it seems it was a simple fix. It just isn't documented anywhere that I could find.
If I change
{{if dynamic}}
to
{^{if dynamic}}
then it magically becomes dynamic. See here.
That's correct.
Certainly it is documented (in quite a few places actually). Here are some of them:
http://www.jsviews.com/#jsviews - see: "And change {{if ...}} to {^{if ...}} and it too will be data-bound."
http://www.jsviews.com/#jsvplaying - see: "Any regular JsRender tag {{someTag ...}} - whether built-in or custom - can be data-linked by adding the ^: {^{someTag ...}}."
http://www.jsviews.com/#samples/editable/tags - see: "Data-linked tags: {^{for ...}}, {^{:...}}, etc."