I started helping someone on a project and one of the click button doesn't work. However, on the staging server, the same identical code for the click works. Any ideas what is causing this? I am new to backbone.js and I am not sure how the same exact code can act differently on two server. I have use code comparing tools to check all the files for differences that might cause this and havn't found anything. Please see below for my code. Thanks for the help!
View.js
Views.Pin = Backbone.View.extend({
events: {
"click .gobackback": 'changeHistory'}
changeHistory: function(e) {
Backbone.history.navigate('/', {
trigger: true
}); /* strip url definition available in actions.js */
changeTitle("Home | Wazaap");
}
};
html
<span class="gobackback">← GO BACK</span>
In HTML
Instead of
<span class="gobackback">← GO BACK</span>
Try
<script type="text/template" id="goback_template">
<span class="gobackback">← GO BACK</span>
</script>
and in view add this
render: function() {
var template = _.template($('#goback_template').html());
}
Related
I have a modal that needs to display some code using codemirror and I am developing the app in AngularJS. The html looks like the following:
<div class="modal-body">
<div ui-codemirror="{onLoad:codemirrorLoaded}" ui-codemirror-opts="viewEventEditorOptions" data-ng-model="event.text"></div>
</div>
The problem I am having is that the code displays in the div only after I click inside it. I have tried refreshing the editor using an event like the following but it is not working:
$scope.codemirrorLoaded = function(_editor){
// Events
_editor.on("beforeChange", function(){ _editor.refresh() });
_editor.on("change", function(){ _editor.refresh() });
};
Any help is appreciated. Thanks.
You need to figure out the moment at which the editor becomes visible (it is apparently not visible when initialized), and at that point call its refresh method.
Add onload action to your options and refresh the codemirror after some milliseconds. Ex :
modalScope.editorOptions = {
lineWrapping : true,
lineNumbers: true,
readOnly: 'nocursor',
mode: 'yaml',
onLoad: function(_editor){
modalScope.editor = _editor;
// Load without click
setTimeout(function(){
modalScope.editor.refresh();
}, 100);
}
};
There was a directive called ui-refresh described on ui-refresh-directive so the following code worked. Thanks for the comments!
<div ui-codemirror="{onLoad:codemirrorLoaded}" ui-refresh="true" ui-codemirror-opts="viewEventEditorOptions" data-ng-model="event.text"></div>
I use ui-refresh="true", but it only show after click to it.
<div ui-refesh="true" ui-codemirror-opts="jsonEditorOption" data-ng-model="user.UserJsonDataParse"></div>
There is an display addon called autorefresh
https://codemirror.net/addon/display/autorefresh.js
include it in your scripts and use one of the fallowing options.
Option 1 HTML
<div ui-codemirror="{onLoad:codemirrorLoaded}"</div>
Option 1 TypeScript
codemirrorLoaded(_editor) {
// Editor part
var _doc = _editor.getDoc();
_editor.focus();
// Options
_editor.setOption('autoRefresh', true);
}
Option 2 HTML
<div ui-codemirror="{autoRefresh:true}">
Option 3 HTML
<div ui-codemirror ui-codemirror-opts="editorOptions">
Option 3 TypeScript
editorOptions{
autoRefresh:true
}
I've used a simple function to show the editor and change from true to false
// HTML
<div ng-show="editorEnabled">
<ui-codemirror ui-refresh="editorEnabled" ng-model="function"></ui-codemirror>
</div
// JS
$scope.editorEnabled= false;
$scope.enableEditor= function() {
$scope.editorEnabled= true;
}
This is weird...the first time I will type in the input box, the typeahead template will pop up but will show empty. But if backspace and do it again...then the template populates. It's like there is some kind of race condition with typeahead-template-url. Ater that, the issue goes away until the next page refresh. Any ideas?
angular.module("main.loadbalancer").controller("BindNodeCtrl", function($scope, $modalInstance, VipService, NodeService, Account, StatusTrackerService) {
(function(promise) {
return $scope.getNodeLabel = function(val) {
return promise.then(function(nodes) {
var dropDownItems;
dropDownItems = [];
_.forEach(nodes, function(node) {
if (_.str.include(node.id.toLowerCase(), val.toLowerCase())) {
return dropDownItems.push({
label: node.label,
address: node.address,
port: node.port_number,
value: node.id,
});
}
});
return _.sortBy(dropDownItems, 'label');
});
};
})(NodeService.getNodes());
<input type="text" id="label" name="label" ng-model="$parent.node.id" typeahead-min-length="1"
placeholder="Node Name / Label"
typeahead-editable="false"
typeahead="dropDownItem as dropDownItem.label for dropDownItem in getNodeLabel($viewValue)"
typeahead-template-url="typeahead/bind-node.html" style="width:100%;"
typeahead-loading="loadingNodeLabels" class="form-control" required>
<script type="text/ng-template" id="typeahead/bind-node.html">
<a><i>{{match.model.label}} — {{match.model.address}} — {{match.model.port}}</i></a>
</script>
I have just come across this issue today and have discovered that the issue was the script tags around the content in the template file. The script tags are only needed if you are including the template inline. If the template is in an external file, such as yours, the script tags should be removed. I am unsure why they cause the errors with the backspacing, but removing the script tags solved this problem for me. I hope this helps you as well, and maybe someone else can shed some light onto what is going on behind the scenes to make this happen in the first place.
I read this one but since there was no answers and the question seems to irrelevant. I would like to ask it here again. I did exactly as the backbone documentation page instructs, but gained no results. Can someone help me point out what went wrong here?
The code as following:
App.View.Task = Backbone.View.extend({
tagName: 'li',
template: _.template($("#taskTemplate").html()),
event: {
'click #edit': 'editTask'
},
editTask: function() {
alert("test");
},
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
}
})
the index.html page looks like this:
<script id="taskTemplate" type="text/template">
<button class="edit">edit</button> <button>delete</button>
</script>
You have #taskTemplate in your JS, but newe1 in your HTML.
Ignoring my typo when specify the element ID in the view, I found that the reason for Backbone not firing the event is because I load the script before that element.
I am using a jQuery tool tip plug-in that requires the use of the jQuery clone function to populate an auto generated tooltip. For the project I am working on, I don't have controle over when the tooltip is initiated nor is there an available callback so I am using jQuery .on('mouseenter') to initialize my event.
Anything I put within the initialize function works, but my click event wont fire. From what I have read, if el is defined then standard events (click) should automatically be bound but that is not happening and as far as I can tell this should be working correctly.
javascript:
Lot = Backbone.View.extend({
initialize: function(){
this.wrapper = $(this.$el).find('.childDiv');
$(this.$el).css('background-color', 'blue');
console.log('init');
},
events: {
'click .showChild': 'showfunction'
},
showfunction:function(e){
this.wrapper.slideToggle('fast');
}
});
//gives the auto generated tooltip a class, otherwise it would be classless
$.balloon.defaults.classname = "balloon";
//tooltip needs content passed in, the tooltip creator recommends using clone
$('#showParent')
.balloon({contents: $('.tooltip-content').clone(), position: "bottom right" });
// this may look redundant, but I do not have access to the initialize function
$('#showParent').on('mouseenter', function() {
console.log('mouse enter');
lots = new Lot({el: $('.balloon .tooltip-content')});
});
HTML:
<button id="showParent">Hover</button>
<div id="wrapper">
<div class="parentDiv tooltip-content">
<h1> Some text to test parent</h1>
<button class="showChild">Click</button>
<div class="childDiv">
<h2> here is a child div</h2>
</div>
</div>
</div>
Here is a fiddle: http://jsfiddle.net/KFkjZ/
any insite as to why the events may not be binding is appreciated
It's because the balloon jquery plugin uses the clone and appends it to the body of the HTML when its first displayed. That breaks the event handler for your Lot view (as it means that the scope of the Backbone attached event handlers are no longer relevant).
One option which breaks the encapsulation would be to attach a document level event to handle the click in the way you want:
$(document).on('click', '.showChild', function (e) {
console.log('clicked');
$(this).slideToggle('fast');
});
For some reason I don't know why my event in a Backbone View doesn't work.
I tried to Google for some answer but I didn't find anything that would help me.
Basically, my code is this:
Backbone:
var ViniView = Backbone.View.extend({
el: $('.container'),
events: {
"click .clickme" : "render"
},
render: function() {
alert("please, work");
}
});
new ViniView;
HTML
<div class="container">
<button class="clickme">
test
</button>
</div>
Your example works fine for me in this fiddle.
As explunit noted, though, your el should reference an element and should not be a jQuery object. $el takes care of that. According to the docs:
All views have a DOM element at all times (the el property), whether they've already been inserted into the page or not.
Check that you're correctly loading the Jquery, Underscore and Backbone scripts (in that order). Also make sure you're script is being executed once the page is ready and not, say, before your DOM has finished loading (causing your view to not attach to anything).