akre54 / backbone.nativeview Goto Github PK
View Code? Open in Web Editor NEWA reference implementation of a native Backbone.View
License: MIT License
A reference implementation of a native Backbone.View
License: MIT License
Blur/Focus are special events (http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html)
As they do not bubble up one can not subscribe to them by using this.delegate
or this.events
I assume here required a trick to emulate the delegation
Hi,
I have the following events hash:
events: {
'blur input': 'someHandler
}
someHandler
is never called> I think this may be because NativeView
is relying on the Event propagating up the tree and checking whether selectors match on the eventTarget. Is the issue that InputEvents such as blur
, input
or change
don't get propagated up to non-input nodes?
Would a better way to attach events be to query the view for the selector and use addEventListener
on the Elements that returns rather than the View
s root element?
I'm not sure if this is NativeView or Backbone itself, so apologies in advance.
When defining an element that is in page el: '#some-element
if the element doesn't exist, it is rightly set to null
.
In the render function I can return early in this case, but any events that are defined are attached to the document
as the element isn't there. This is causing issues and interruptions for the rest of the page.
What should I be doing in this case? I've tried using undelegateEvents
to no effect, as they haven't been correctly delegated, and the code looks for this.el
.
Is there any plan to make NativeView part of backbonejs, as a sort of base view.
Would it make sense in the same occasion to deprecate the original Backbone.View
, and point developers to some Backbone.$View
instead in the case of jQuery?
Hey, i am new to the 'MVC'-World but i would like to get my Hands on it.
I liked Backbone because im not dependent on an node-driven system and lame-old jQuery. On top of that, the syntax is great.
Anyways - like i said - i don't like to use jQuery and stumbled upon this great addition to Backbone.
So i include Backbone and after that Backbone.NativeView with script-tags.
<script src="../underscore.js"></script>
<script src="../backbone.js"></script>
<script src="../backbone.nativeview.js"></script>
Then i've tried to add my first view and it caused the following error 'Backbone.$ is not a function'
These are the lines that i've tried getting to work:
Backbone.View = Backbone.NativeView;
var MainView = Backbone.View.extend();
var mainView = new MainView();
var MainView = Backbone.NativeView.extend();
var mainView = new MainView();
The call stack is as followed:
_.extend._ensureElement @ backbone.js:1105
Backbone.View @ backbone.js:1000
Backbone.NativeViewMixin.constructor @ backbone.nativeview.js:61
child @ backbone.js:1566
(anonymous function) @ script.js:83
It seems like he is trying to use the jQuery selector even though we defined our own $ Selector
$: function(selector) {
return this.el.querySelectorAll(selector);
},
Am i doing something wrong, have i missunderstood something? In both cases, can someone please give me an advice.
Thanks a lot.
Btw: I am using Backbone.NativeView.js 0.3.2 and Backbone.js 1.1.2 with Underscore.js 1.8.2 in the latest Chrome
Since Backbone.NativeView is not overriding _ensureElement, if I am using Backbone.NativeView directly, $el still exists. Which isn't a problem per say, but your documentation says otherwise.
Related to akre54/chaplin/pull/4
There's some small inconsistencies between how jQuery and NativeView treat currentTarget
and delegateTarget
. I've put two ugly jsbin two illustrate this : one for jQuery and and one for NativeView, i think it comes from this jQuery bug
Basically, when using NativeView#delegate without selector, delegatedTarget
is undefined, whilst in jQuery's case, it always equals currentTarget
.
When used with a selector, currentTarget
and delegatedTarget
are swapped according to the implementation.
Not sure if it's possible or desirable to do something here. Thoughts?
Hey I am not sure if this is normal, but in bower.json there is:
...
name: "backbone.nativeview",
...
When trying to install with bower install backbone.nativeview
there is error "package not found". I was able to install it using bower install Backbone.NativeView
though. I guess that maybe bower.json should be updated?
How can I use Backbone.NativeView and Browserify (particularly, gulp-browserify)?
This repo does not appear to be registered on NPM. Would you mind doing it? Putting Github repo url in package.json
feels.. wrong.
While messing with NativeView#undelegate
I realized that it's only possible to undelegate using a selector when that selector matches exactly the string passed to delegate
. It doesn't do matching or sub-selections.
Let's say you called view.delegate('click', '*')
and then tried to view.undelegate('click', 'div')
. Or view.delegate('click', 'h1, div')
, or any sub-selector. Since the strings don't match, we wouldn't be able to undelegate for you. Selector strings don't work that way.
I'm tempted to say "screw it". Undelegating isn't that common of a use case. We'd have to implement the better part of Sizzle to get this behavior (or call matches
over a querySelectorAll
ElementList). Is it worth solving?
Could you please publish the latest version to NPM? Thanks
https://github.com/akre54/Backbone.NativeView/blob/0.2.1/backbone.nativeview.js#L52
You will always assign it an empty list in the constructor anyway, so it's not needed right?
I see this issue has come up a few times and in the tickets logged there's never really been a resolution. I've followed the instructions here (https://github.com/paulmillr/exoskeleton/wiki/Exoskeleton-without-jQuery) regarding how it should be handled from a Browserify / CommonJS perspective but I constantly get errors even when using aliasify.
The problem seems to be that Aliasify is not transforming anything in node_modules
that we call as dependencies, so the reference to backbone
inside your library never seems to get rewritten. The "recipe" in the link posted above, have you verified that it works and have a code example that I could pull?
I've logged a ticket with Aliasify:
benbria/aliasify#25
Im trying to load NativeView with require() but didnt see a guide on that. Being that everything I tried failed, can you please show how to do that?
I tried:
var Backbone = require('backbone'),
_ = require('underscore'),
NativeView = require('backbone.nativeview')
module.exports = Backbone.View.extend(Backbone.NativeViewMixin, {
var Backbone = require('backbone'),
_ = require('underscore'),
NativeView = require('backbone.nativeview')
module.exports = NativeView.extend({
var Backbone = require('backbone'),
_ = require('underscore'),
NativeView = require('backbone.nativeview')
module.exports = Backbone.NativeView.extend({
amongst other. While Backbone.View = NativeView
works, this is for a library and I dont want to force NativeView to be global. When running tests, I'm getting:
9) View Attach to:
TypeError: Expecting a function in instanceof check, but got undefined
at _.extend._setElement (node_modules/backbone/backbone.js:1253:40)
at _.extend.setElement (node_modules/backbone/backbone.js:1242:12)
at _.extend._ensureElement (node_modules/backbone/backbone.js:1322:14)
at new Backbone.View (node_modules/backbone/backbone.js:1190:10)
at Context.<anonymous> (tests/viewsTest.js:110:20)
Style cleanup introduced a bug as described here.
When initializing the mixin via against the Backbone 1.2.0 release,
_.extend(Backbone.View.prototype, Backbone.NativeViewMixin);
this._domEvents
is never initialized
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.