I am looking for a very simple example where e.g. there is a two way binding between span text and an input element using Backbone.js and Rivets.js. Perhaps there is one in the Rivets.js docs, but I can't find it. Any help please?
Assuming that you mean a two-way binding (model-to-view and view-to-model) on an input element and a one-way binding (model-to-view) on a span element, then the following view will do what you describe.
<div id="user-view">
<span>{ user:name }</span>
<input rv-value="user:name">
</div>
Here is a fiddle that demonstrates things in action. It includes a Backbone adapter on the : interface and shows how to bind a model to the view (this is just a more trivial example of what is already shown on the homepage).
I recommend that you use：
https://github.com/theironcook/Backbone.ModelBinder
It can satisfy the two-way binding between the demand of all the view and model。
This is what I do nested view binding example：
http://files.cnblogs.com/justinw/Nested_Model_bi_Binding.zip
Related
Is there a way to bind via html to a variable property in angular 1.x?
I have a data object that I need to update based on certain conditions, which would change the property it should bind to:
<div ng-repeat="option in options">
<custom-component selected="$ctrl.data[option.dataProperty]"></custom-component>
</div>
I can't seem to get it to bind into the customComponent with one or two way bindings. Would appreciate any other suggestions.
Update:
Thanks for the comments, writing the plunker illuminated the problem for me :) you can find it here for posterity's sake. Thanks!
My use case is completely different. When I strip off all the other factors, it boils down to this.
Say I have the following input element
<input type="text" [customDirective] [(ngModel)]="myValue" >
The job of this customDirective is to look into value entered by the user and changed its value based on the input on the fly.
How to achieve two-way binding for this.
I played around with ControlValueAccessor, DefaultValueAccessor. But no matter what I do, I was not able to achieve the two-way binding. The maximum I achieved at one time is view update on model update but not the other way round. But that code is somewhere lost.
Here is the vanilla plunker link.
PS: I already referred the following. But none of them were helpful in achieving 2-way binding w.r.t to directive
http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
angular2 wysiwyg tinymce implementation and 2-way-binding
Thanks in advance
Finally figured out how to do this.
Model to UI changes can be done using ControlValueAcessor
UI to Model can be done like below
import {Output} from '#angular/core';
Use the event emitter
#Output() ngModelChange = new EventEmitter();
Whenever data gets changed emit the event
this.ngModelChange.emit(YOUR_NEW_VALUE);
Here is the detailed example
Using Tinymce editor as a directive
I have an angular service that returns a list of items from the database.
I display those items through an ng-repeat. I'd like to hide/show each one of them using the ng-show.
Is it a good practice to add a "display" property directly on my items to show or hide them in the UI?
Edit: If someone could point me to an article explaining that orientation (can't seem to find any).
Yes. This is the right choice. It enables your model to control how items are viewed according to a separately controlled logic. This makes your application scalabale too.
A filter is a better choice in further modeling your logic.
As suggested by other answers, filter is the better choice for your case. Add a property display and then filter based on that property.
<div ng-repeat="item in dataFromServer | filter:{ display: true }">
{{item.name}}
</div>
I have used underscore to create a new property for each object
https://jsfiddle.net/k8u3c8t7/
I've created the following example:
http://dojo.telerik.com/ACIKe
It is based on kendo's TreeView angular example.
What can be seen here is that the model is not updated when checking/unchecking the checkboxes.
Any idea how to do the two-way binding work here?
You have to use the kendo.data.ObservableArray instead of the kendo.data.HierarchicalDataSource
Check this out:
http://dojo.telerik.com/InOQo
I have read some articles that said ng-repeat would led to poor performance if there is over 2000 items, because there are too many two way binding to watch. I am new to angularjs and have trouble understanding the relationship between ng-repeat and two-way binding:
Does ng-repeat (like outputting a list of json objects) necessarily create two way binding?
Is there a simple way to do ng-repeat using only one way binding? (preferably do not need external module)
Like user1843640 mentioned, if you are on Angular 1.3, you can use one-time-binding, but, just for clarity, you need to put the :: on all the bindings, not just the repeater. The docs say do this:
<div ng-repeat="item in ::items">{{item.name}}</div>
But, if I count the watchers, this only removed one. To really drop the number of two-way-bindings, place the :: on the bindings within the repeater, like this:
<div ng-repeat="item in ::items">{{::item.name}}</div>
Here are two plunkers that will display the number of watchers:
All Bindings
Repeater Only
Thanks goes out to Miraage for provinding the function to count the watchers https://stackoverflow.com/a/23470578/2200446
For anyone using or upgrading to Angular 1.3 you can now use "one-time binding". For ng-repeat it would look like this:
<div ng-repeat="item in ::items">{{item.name}}</div>
Notice the ::items syntax.
For more information check the Angular documentation for expressions.
This blog post presents some interesting solutions. The end result was:
Upgrade to AngularJS 1.1.5 and use limitTo together with Infinite scrolling. AngularJS ng-repeat offers from version 1.1.4 the limitTo option. I slightly adapted the Infinite Scroll directive to make scrolling within a container possible that does not have height 100% of window.
Basically you limit the number of objects you initially render, then use the Infinite scrolling directive to render more as needed. Since you don't want an external module, just mimic the infinite scroll functionality as needed with your own script.
Note: This should solve your performance problem but it won't remove two-way binding.
what ever is generated by ng-model will be having a watcher on data(model) which reduces the page performance if it crosses 200 watchers.
Refer this for ONE WAY BINDING http://blog.scalyr.com/2013/10/31/angularjs-1200ms-to-35ms/ but make sure you use it properly
Hope it helps!!!