Search Results

Search found 14 results on 1 pages for 'emberjs'.

Page 1/1 | 1 

  • How can i look at a controller property to assign a classBinding in EmberJS Dynamically

    - by j_mcnally
    So far this is not working. Althrough the property should return true on my first page Props form GWVideoApp.VideosController isFirst: function() { return this.currentPage == 1; }.property(), isLast: function() { return this.currentPage == this.pages; }.property(), View: {{#view Ember.Button target="GWVideoApp.VideosController" classBinding="GWVideoApp.VideosController.isFirst:hide" tagName="li" action="prevPage"}}Prev{{/view}} When currentPage value changes the classBindings to do not

    Read the article

  • Emberjs bindAttr inside of #each

    - by Andrej Kaurin
    Code for view is Ember.View.extend({ template: Ember.Handlebars.compile(html), // html is in string content: function() { return [ { Title: "Dashboard", ID: "dashboard" }, { Title: "Invoices", ID: "invoices" }, { Title: "Expenses", ID: "expenses" }, { Title: "People", ID: "people" }, { Title: "Reports", ID: "reports" }, { Title: "Settings", ID: "settings" } ]}, iconClass: "icon icon-dashboard" }); Template (show above as "html") looks like this: <ul> {{#each link in content}} <li> <a> <span class="icon" {{bindAttr class="iconClass"}}></span> <span class="title">{{link.Title}}</span> </a> </li> {{/each}} </ul> Am I doing something wrong with scope or?

    Read the article

  • emberjs on symfony2 dev enviroment dont work propertly

    - by rkmax
    I've builded a app with symfony2 the app expose an REST Api. now i build a simple client for consuming app.coffee - app.js App = Em.Application.create ready: -> @.entradas.load() Entrada: Em.Object.extend() entradas: Em.ArrayController.create content: [] load: -> url = 'http://localhost/api/1/entrada' me = @ $.ajax( url: url, method: 'GET', success: (data) -> me.set('content', []) for entrada in data.data.objects me.pushObject DBPlus.Entrada.create(entrada) ) MyBundle:Home:index.html.twig <script type="text/x-handlebars" src="{{ asset('js/templates/entradas.hbs') }}"></script> <script src="{{ asset('js/libs/jquery-1.7.2.min.js') }}"></script> <script src="{{ asset('js/libs/handlebars-1.0.0.beta.6.js') }}"></script> <script src="{{ asset('js/libs/ember-1.0.pre.min.js') }}"></script> <script src="{{ asset('js/app.js') }}"></script> the problem here is when i run on dev enviroment and link the template like <script type="text/x-handlebars" src="{{...}}"> the app dont work, nothing show but works fine over prod enviroment. he only way that works on dev enviroment is inline template MyBundle:Home:index.html.twig <script type="text/x-handlebars"> {% raw %} <ul class="entradas"> {{#each App.entradas}} <li class="entrada">{{nombre}}</li> {{/each}} </ul> {% endraw %} </script> can explain why this behavoir? Note: I disabled the debug profiler toolbar, and nothing

    Read the article

  • Create links programmatically inside an EmberJS view

    - by Michael Gallego
    I have a pretty complex view to render which involves some kind of recursion (the typical folder/file nested list). The fact that it contains heterogeneous objects (folders and files) make it even harder to write Handlebars templates. Therefore, the only solution I've found is to create a view, and manually fill the render buffer. I came with the following solution: App.LibraryContentList = Ember.View.extend({ tagName: 'ol', classNames: ['project-list', 'dd-list'], nameChanged: function() { this.rerender(); }.observes('[email protected]'), render: function(buffer) { // We only start with depth of zero var content = this.get('content').filterProperty('depth', 0); content.forEach(function(item) { this.renderItem(buffer, item); }, this); }, renderItem: function(buffer, item) { switch (item.constructor.toString()) { case 'Photo.Folder': this.renderFolder(buffer, item); break; case 'Photo.File': this.renderFile(buffer, item); break; } }, renderFolder: function(buffer, folder) { buffer.push('<li class="folder dd-item">'); buffer.push('<span class="dd-handle">' + folder.get('name') + '</span>'); // Merge sub folders and files, and sort them by sort order var content = this.mergeAndSort(); if (content.get('length') > 0) { buffer.push('<ol>'); content.forEach(function(item) { this.renderItem(buffer, item); }, this); buffer.push('</ol>'); } buffer.push('</li>'); }, renderFile: function(buffer, album) { buffer.push('<li class="album dd-item">'); buffer.push('<span class="dd-handle">' + file.get('name') + '</span>'); buffer.push('</li>'); } }); Now, what I'd like is to be able to add links so that each folder and each file is clickable and redirect to another route. But how am I supposed to do that, as I don't have access to the linkTo helper? I've tried to play with the LinkView view, but without any success. Should I register handlers manually for each item? I've also thought about breaking that with a CollectionView instead, and splitting the content by depth so that I could render it using templates, but it seems more complicated. Any thoughts?

    Read the article

  • Using multiple named outlets and a wrapper view with no content in Emberjs

    - by user1889776
    I'm trying to use multiple named outlets with Ember.js. Is my approach below correct? Markup: <script type="text/x-handlebars" data-template-name="application"> <div id="mainArea"> {{outlet main_area}} </div> </script> <script type="text/x-handlebars" data-template-name="home"> <ul id="sections"> {{outlet sections}} </ul> <ul id="categories"> {{outlet categories}} </ul> </script> <script type="text/x-handlebars" data-template-name="sections"> {{#each section in controller}} <li><img {{bindAttr src="section.image"}}></li> {{/each}} </script> <script type="text/x-handlebars" data-template-name="categories"> {{#each category in controller}} <img {{bindAttr src="category.image"}}> {{/each}} </script>? JS Code: Here I set the content of the various controllers to data grabbed from a server and connect outlets with their corresponding views. Since the HomeController has no content, set its content to an empty object - a hack to get the rid of this error message: Uncaught Error: assertion failed: Cannot delegate set('categories' ) to the 'content' property of object proxy : its 'content' is undefined. App.Router = Ember.Router.extend({ enableLogging: false, root: Ember.Route.extend({ index: Ember.Route.extend({ route: '/', connectOutlets: function(router){ router.get('sectionsController').set('content',App.Section.find()); router.get('categoriesController').set('content', App.Category.find()); router.get('applicationController').connectOutlet('main_area', 'home'); router.get('homeController').connectOutlet('home', {}); router.get('homeController').connectOutlet('categories', 'categories'); router.get('homeController').connectOutlet('sections', 'sections'); } }) }) });

    Read the article

  • What is the best way to bind PhoneGap events (like backbutton) to views in ember.js

    - by Fedor
    I'm playing with PhoneGap and emberjs (trying to build "proof of concept" mobile/HTML5 application based on ember.js). Ember.js itself works fine, but I haven't found any good way to "bind" PhoneGap events to views. For instance, I would like to handle backbutton event and remove a view on it. It would be nice to define behavior in view class and call document.addEventListener when instance of the view is appended and call document.removeEventListener when view instance removed.

    Read the article

  • Metamorphs Messing Up CSS in Ember.js Views

    - by Austin Fatheree
    I'm using Ember.js / handlebars to loop through a collection and spit out some items that I'd like bootstrap to handle nice and responsive like. Here is the issue: The bootstrap-responsive css has some declrations in it like: .row-fluid > [class*="span"]:first-child { margin-left: 0; } and .row-fluid:before, .row-fluid:after { display: table; content: ""; } These rules seem to target the first children. When I loop through my collection in handlebars I end up with a bunch of metamorph code around my items: <div class="row-fluid"> {{#each restaurantList}} {{view GS.vHomePageRestList content=this class="span6"}} {{/each}} </div> Here is what is produced: <div class="row-fluid"> <script id="metamorph-9-start" type="text/x-placeholder"></script> <script id="metamorph-104-start" type="text/x-placeholder"></script> <div id="ember2527" class="ember-view span6"> My View </div> <script id="metamorph-104-end" type="text/x-placeholder"></script> <script id="metamorph-105-start" type="text/x-placeholder"></script> <div id="ember2574" class="ember-view span6"> My View 2 </div> <script id="metamorph-105-end" type="text/x-placeholder"></script> <script id="metamorph-9-end" type="text/x-placeholder"></script> </div> So my question is this: 1. How can I tell css to ignore script tags? or 2. How can I edit the css bindings so that they skip over script tags when selecting the first or first child? or 3. How can I structure this so that Ember uses fewer/no metamorph tags? Here is a fiddle: http://jsfiddle.net/skilesare/SgwsJ/

    Read the article

  • Ember.js CollectionView order

    - by ilia choly
    I have an ArrayController which is periodically updated. It has a sorted computed property which keeps things in order. I'm trying to use a CollectionView with it's content property bound to the sorted property, but it's not rendering them in the correct order. demo I've obviously made the false assumption that order is maintained between the content and childViews property. What is the correct way to do this?

    Read the article

  • Using ember-resource with couchdb - how can i save my documents?

    - by Thomas Herrmann
    I am implementing an application using ember.js and couchdb. I choose ember-resource as database access layer because it nicely supports nested JSON documents. Since couchdb uses the attribute _rev for optimistic locking in every document, this attribute has to be updated in my application after saving the data to the couchdb. My idea to implement this is to reload the data right after saving to the database and get the new _rev back with the rest of the document. Here is my code for this: // Since we use CouchDB, we have to make sure that we invalidate and re-fetch // every document right after saving it. CouchDB uses an optimistic locking // scheme based on the attribute "_rev" in the documents, so we reload it in // order to have the correct _rev value. didSave: function() { this._super.apply(this, arguments); this.forceReload(); }, // reload resource after save is done, expire to make reload really do something forceReload: function() { this.expire(); // Everything OK up to this location Ember.run.next(this, function() { this.fetch() // Sub-Document is reset here, and *not* refetched! .fail(function(error) { App.displayError(error); }) .done(function() { App.log("App.Resource.forceReload fetch done, got revision " + self.get('_rev')); }); }); } This works for most cases, but if i have a nested model, the sub-model is replaced with the old version of the data just before the fetch is executed! Interestingly enough, the correct (updated) data is stored in the database and the wrong (old) data is in the memory model after the fetch, although the _rev attribut is correct (as well as all attributes of the main object). Here is a part of my object definition: App.TaskDefinition = App.Resource.define({ url: App.dbPrefix + 'courseware', schema: { id: String, _rev: String, type: String, name: String, comment: String, task: { type: 'App.Task', nested: true } } }); App.Task = App.Resource.define({ schema: { id: String, title: String, description: String, startImmediate: Boolean, holdOnComment: Boolean, ..... // other attributes and sub-objects } }); Any ideas where the problem might be? Thank's a lot for any suggestion! Kind regards, Thomas

    Read the article

  • How to update content of one ArrayController from the selected value of another ArrayController in Ember.js

    - by CodeHugger
    I have the following problem in ember.js. A child controller depends on a selected value in a parent controller in order to determine its content. In the database a child has a parent_id reference. App.parentsController = Em.ArrayController.create({ content: [], selected: null }); App.sonsController = Em.ArrayController.create({ // the value of content depends on the id of // the selected item in the parentsController content: [], selected: null }); App.daughtersController = Em.ArrayController.create({ // the value of content depends on the id of // the selected item in the parentsController content: [], selected: null }); I would prefer to solve this without the parentsController having to know anything about the other controllers. This should be possible with observers, bindings or even through calculations but I have no clue where to start. Any help would be well appreciated.

    Read the article

  • How can I have HTML tab expansion in ST2 w/ Emmet inside Handlebars templates(emberjs)?

    - by Zuko
    Okay, so I'm using Sublime Text 2 with Emmet. But "Tab" expansion of HTML snippets doesn't work inside a script because of the scope. Example: In HTML, I can type "h1" and then hit tab, and it will generate "" When using Ember.js, and more specifically Handlebars, it doesn't work. <script type="text/x-handlebars"> h1 </script> Pressing tab after that "h1" doesn't expand it because it's inside a script; Emmet turns this off. I can press Ctrl+E, which is the "expand anywhere" hotkey, and that works just fine. However, that is uncomfortable and prone to missing and hitting things like Ctrl+S or Ctrl+D which have undesired effects. So, how can I change this? I tweeted at the developer, and got a reply, https://twitter.com/chikuyonok/status/398708331969540096 But couldn't understand what to do.

    Read the article

  • Sequence for authentication on a decoupled client?

    - by A T
    Using a sequence diagram and example code could you explain to me how authentication works when the client is completely separated from the server? I.e.: you haven't generated any of the client using a server-side template engine, rather you are communicating using REST (SOAP xor HTTP) xor RPC (XML xor JSON) with javascript on the client-side. Specifically I would like to know the sequence of: Authenticating using basic auth (user+pass) with "my" server Authenticating using OAuth2, e.g.: with Facebook, with facebook's server then whatever extra steps are needed for "my" server And how it could be implemented. (feel free to use psuedo-code [like below] or [preferably] prototyped simply using BackboneJS, AngularJS, EmberJS, BatmanJS, AgilityJS, SammyJS xor ActiveJS. if cookie.status in [Expired, Tampered, Wrong IP, Invalid, Not Found]: try auth(user,pass): if user is in my db: try authenticate(user,pass) if successful: login user # give session-cookie here? else: present user with "auth failed" msg else if user not in db: redirect to "edit-profile" page PS: I have written an example (editable) auth sequence diagram; based on facebooks' documentation.

    Read the article

  • Ember-App-Kit: How to execute code only in release mode?

    - by Dominik Schmidt
    I have created an error handler as described here: http://emberjs.com/guides/understanding-ember/debugging/#toc_implement-a-code-ember-onerror-code-hook-to-log-all-errors-in-production But this code is not only executed in production mode but also in normal debug builds which floods my server logs. I know that Ember.debug() calls and alike are being filtered out for production builds, but I couldn't find out where/how that is implemented and if that same mechanism could be used to make my code only fire in production code.

    Read the article

  • Data binding in web UI frameworks, what's the deal?

    - by c-smile
    I believe that most of modern Web frameworks that pretend to be MVC ones also has a notion of data binding in one form or another. Examples: AngularJS, EmberJS, KnockoutJS, etc. I am assuming that "data binding" is a declarative definition (oxymoron, no?) of live link between data (a.k.a. model) and its representation (a.k.a. view). With some transformers in between (a.k.a. controllers). I understand why declarativeness is kind of appealing but also understand that as usual it comes with the price. In particular: 1. Live binding is quite heavy, either with dirty watch (high CPU consumption) or with Object.observe() (high memory consumption with high CPU load in some scenarios). 2. There is a "frame" part in the framework word, means there are some boundaries/limits that can be hard to overcome if you need slightly more than it was designed for. Quite usual time split: 90% of features are made in 10% of project time. But 10% rest take 90% of project time. I suspect (a.k.a. educated guess) that those MVC things are not helping to implement more functionality in less time... If so their usage motivation is not quite clear. As an example: last week wanted to find virtual list idea/solution. Found one in vanilla JavaScript that is 120 LOC. Implementation of the same but in AngualrJS is about 420 LOC. Most of the code there seems like a fight with the framework itself... So is my question: what benefits that MVC stuff or data binding give us? Is it just a buzzword popular among project managers or they give us something useful. If later one then what exactly?

    Read the article

1