Ember.js How do I add child views to a ContainerView

I am following EmberJS online documentation and am uncertain about how to add child view(s) to a parent or nested child view(s) to a parent. I downloaded Ember start-up folder and working with the files. I am able to view the "MainView". It all makes sense so far but when I try to follow the online documentation with regards to views and children views, I am not able to get the child view going. My current code: window.App = Em.Application.create(); App.MainView = Em.View.extend({ classNames:

Ember.js Notify Parent hasMany list when child changes its parent

Say i have a relationship Parent (1) <-> Child (0..n) and corresponding models Zik.Node = DS.Model.extend({ id : DS.attr('number'), name : DS.attr('string'), leafs : DS.hasMany('Zik.Leaf', {key : 'leaf_ids'}) }); Zik.Leaf = DS.Model.extend({ id : DS.attr('number'), name : DS.attr('string'), node : DS.belongsTo('Zik.Node') }); At some point one Zik.Node(id=2) child Zik.Leaf changes relationship to another parent Zik.Node(id = 1). Now if Zik.Node ob

Ember.js: Upload file component

I need to create an Ember component to select a file. My page will include multiple "upload component" I have read a post trying to implement that: (https://stackoverflow.com/questions/9200000/file-upload-with-ember-data) BUT the UploadFileView is directly linked to the controller. I would like to have something more generic... I would like to remove the App.StoreCardController.set('logoFile'..) dependency from the view or pass the field (logoFile) from the template... Any idea to improve th

Ember.js EmberJs: component template

I try to wrap a colorPicker component from http://www.eyecon.ro/bootstrap-colorpicker/ I need to fill the "background-color css attribute" of the template with the "value" attribute of the view... I have tried to set {{value}} but it does not work... Any advice ? JavaScript: App.ColorPicker = Em.View.extend({ classNames: 'input-append color', attributeBindings: ['name', 'value'], value: '', template: Ember.Handlebars.compile('{{view Ember.TextField valueBinding="this.

Ember.js Belongs_to usage in ember js

I want to show on page income name of each operation. I think i need to use belongs_to but i don't konw how. I have two tables: IncomeOperation: (id, sum, income_id) Income: (id, name) models/income.js.coffee EmberMoney.Income = DS.Model.extend name: DS.attr('string') description: DS.attr('string') models/income_operation.js.coffee EmberMoney.IncomeOperation = DS.Model.extend sum: DS.attr('number') incomeId: DS.belongsTo('EmberMoney.Income') // I think i should be so routes/add

Ember.js Nested Routes in emberJS

I have the following routes: @resource 'menus', (-> @resource 'menu', {path: ':menu_id'}, ( -> @resource 'menu_pages', ( -> @resource 'menu_page', {path: ':menu_page_id'} ) ) ) and I am trying to transition to a nested route as follows: firstMenuPage = App.MenuPage.find(1) @transitionToRoute 'menu_page', firstMenuPage but I am getting the following error: Uncaught Error: assertion failed: Cannot call get with 'id' on an undefined object. Anyone know what is g

Ember.js ember-data DS.RESTAdapter how to filtering data? (screen)

I have the table like on the screen below. I have row to filtering table. When i type in Subject column "psa" i want show only row with "psa" in Subject. The same with field selectbox where i can choose prepared options, example for status: open,close,waitin for reply. How can i do that? What can i use? For now i am using: Table.Store = DS.Store.extend({ adapter: DS.RESTAdapter.extend({ namespace: 'api/models' }) }); http://emberjs.com/guides/models/the-rest-adapter/ Is it possibl

Ember.js ember-data adapter to read from cloudant RESTful API

The cloudant RESTful API is fairly simple but doesn't match the way ember-data expects things to be. How can I customize or create an Adapter that deals with these issues... In my specific case I only want to load records from one of several secondary indexes (ie. MapReduce fnctions). The URL for this is below, where [name] and [view] would change depending on user selection or the route I am in. https://[username].cloudant.com/[db_name]/_design/[name]/_view/[view] Looking at the ember-dat

Ember.js Loading a 3rd party embed widget within an Ember.View

I'm loading the RebelMouse embed widget into an Ember.View, like so: App.RebelMouseView = Em.View.extend({ didInsertElement: function() { var widgetEmbedCode = '<script type="text/javascript" class="rebelmouse-embed-script" src="https://www.rebelmouse.com/static/js-build/embed/embed.js?site=W3portals&height=900&flexible=1"></script>'; this.$().append(widgetEmbedCode); } }); But I'm hoping there's a better way to do so. One undesired side-effect is that everytime I in

Ember.js Find query concept for route and controller

my question is a little bit general. What is the best concept for route and controller with findQuery in ember. I have api with data filtering. Data request is executed by this.store.findQuery('dataModel', {"q": JSON.stringify({"filters": filters})}); after that I show them in table view. The filter is updated by form views in a template. My current solution: Form views set controller parameters and a button call action from controller. Controller action loads parameter, executes findQuery

Ember.js Why is my associations not getting binded?

Ember : 1.1.2 Ember Data : 1.0.0-beta.3 Handlebars : 1.0.0 Hi fellows, After upgrading my application with EmberData 1.0.0-beta.3 i am struggling to traverse my data the way i want to. In my application you are creating job, and you have to pick a Field of service. MyApp.ServiceField = DS.Model.extend name: DS.attr('string') description: DS.attr('string') services: DS.hasMany('service') In addition you pick a service in that field. MyApp.Service = DS.Model.extend name: DS.

Ember.js Having trouble getting my model set up

I have the following routes : this.resource('categories', function() { this.route('add'); this.resource('category', {path: ':category_id'}, function() { this.route('edit', {path: "/edit"}); this.resource('products', function(){ this.route('add'); this.resource('product', {path: ':product_id'}); }); }); }); Everything works except the edit route. For some weird reason, my model doesn't get initialized. App.CategoryRoute = Ember.Rout

Ember.js What should the controller name be for this route?

I have the following route: "get-started" However when I create a file named "get_started_controller" in app/controllers (ember app kit) it doesn't seem to be picking up this controller. export default Ember.Controller.extend({ personName: "set"; actions: { letsDesign: function() { alert('hi'); } } }); it says "nothing handled the action 'letsDesign' when I have a button bound to that action.

Ember.js PATCH with ember-data

With ember-data 1.0, is there any way to wrap up a set of changes to a record and only apply those changes once they've successfully hit the server? My use case is a simple one - there's an 'edit' modal for a Post that's triggered by an 'edit' button. I'm trying to find a way to emulate a traditional form that only updates the Post's attributes when a 'save' button is clicked and the server confirms the patch. I can use one-way bindings in my TextFields in the modal, but that still doesn't sol

Ember.js Ember Data override find method

I need to override the find() method in ember-data to make it compatible with my app. Its not a huge modification that I have to do, but I don't know where to start. So far when I try to do this : this.store.find('enquiry'); Ember-Data is trying to fetch information from http://localhost/enquiries instead of http://localhost/enquiry. My problem is that I don't need to get the plural of my url.. I thought also using the jquery method but, I would rather using Ember-Data for this. How can I do t

Ember.js Emberjs CollectionView array in an array

Hi I would like to know if it was possible to use a more complex array for the collectionView. Because for now I'm only using it like this : App.GroupList = Ember.ArrayController.create({ content: ['A','B','C','D'], }) App.GroupListView = Ember.CollectionView.extend({ tagName: 'tbody', contentBinding: "App.GroupList" }) And display them like this : <table class="table-history"> {{#collection App.GroupListView}} <td class="col-left"> {{view.content}}

Ember.js Uncaught Error: Assertion Failed: calling set on destroyed object

working in ember-cli testing. After all tests passed it returns extra two test with errors. Uncaught Error: Assertion Failed: calling set on destroyed object Source : '../dist/assets/vendor.js:13269' this is one unit test configuration import Ember from "ember"; import { test,moduleFor } from 'ember-qunit'; import startApp from '../helpers/start-app'; var App; module('An Integration test',{ setup:function(){ App=startApp(); }, teardown: function() { Ember.r

Ember.js ember version 1.6.1 best to way to bind css style

I am using ember version 1.6.1. I would like to show an error message if user doest not enter username and password correctly. I think i have to use bind-style. now I have code like this: <fieldset class="error-message" {{bind-style visibility="isVisible:visible:hidden"}}> <span>invalid username/password</span> </fieldset> what is the best way to do it ?

Ember.js Application level menu configurable at router/controller level

I've an Ember.js where I wish to have a menu "bar" at the application template (or a partial template). The menu is generic but has a couple options/properties that should be controlled by the router or controller, for example, some routes like login shouldn't show a "go back" button. I also wish to avoid boilerplate at the router or controller levels but I'm finding the solution I've devised to be less than ideal. Here's what I did: controllers/application.js: showBackButton: function() {

Ember.js How do I do a "needs" on a nested controller for emberjs?

I have the following router: this.resource('foo', {path: '/foo'}, function() { this.resource('foo.bar', {path: '/bar'}, function() { this.route('wat', {path: '/wat'}); }); }); My FooBarWatController is a singleton and I need access to the FooBarController's model. What does the needs look like for FooBarWatController to have access to the FooBarController? FooBarWatContoller = Ember.ObjectController.extend({ needs: ['?'], action: { something: function() {

Ember.js Convert Ember-Data Model into an Array

I'm trying to convert Ember-Data Model instances to an array with the goal of loading it into an Handsontable (http://handsontable.com). The toArray() method does not seems to convert the attributes of the StatVals Model to an Array but to create an Array of StatVals objects. How to properly construct an Array from a Ember-Data Model Attributes? Further, I want the new array to contain the time and element and not the other attributes of the statVal model. How should I approach this? The View

Ember.js Sideloading with Ember Data

I'm attempting to get rid of some async relationships in Ember-Data and sideload them instead but am running into some issues. My API sends back the related data but the records are properties on each object returned instead of a separate array/object on the root. I'm using extractArray to munge the data so ED likes it but can't quite get it right. Here is a sample of the data returned from the API: { "record": [ { "id": 2, "name": "3M Aerospace", "currency": 6, "

Ember.js Saving new record in Ember-cli using POST mehod is not working

I am using ember-cli with ember-data 1.8.1.I have write api in hapijs. Problem is when i am creating a new record and saving it.then it should be POST request,but it sending method 'OPTIONS', and saying 404 not found. I find error in console is :- [Report Only] Refused to connect to 'http://localhost:3000/users' because it violates the following Content Security Policy directive: "connect-src 'self' ws://localhost:35729 ws://" OPTIONS http://localhost:3000/users XMLHttpRequest c

Ember.js emberjs - Control when an initializer is ran

I have some code that raises a basic pubsub event: export default Ember.Service.extend(ConnectListenersMixin, { onGetInitial: function() { this.trigger('listUpdated', payload); } This request that ends up triggering the event is made from the beforeModel hook of a route: beforeModel: function() { this.TodoActions.getTodos(); } The problem is that the code that subscribes to this event is made in the init event of a component: export default Ember.Mixin.create({ connect: Em

Ember.js EmberJS computed sort property conflicting with jQuery UI Sortable

I am having an issue with getting drag-and-drop sort functionality with EmberJS working. The tutorials that cover this issue don't provide any help on the initial sort, which I am doing through a computed property. What I'm encountering seems to be a race condition between ember's rerender when the sortedItems computed property changes and jQueryUI Sortable updating the DOM. List Items get duplicated, or disappear altogether upon sorting. Route import Ember from 'ember'; export default Embe

Ember.js Converting an Ember-Data RecordArray to an Ember Array

I am getting some records back as a RecordArray or a FilteredRecordArray and I'd like to convert this to an array of Ember objects (or maybe just POJO objects). I had thought maybe I could do the following: emberDataRecords.map( item => { return Ember.Object.create( JSON.stringify(item) ); }); but it appears the Ember-Data structure is circular and so JSON falls over. Anyway, any help would be appreciated.

Ember.js Migrate from Ember Start Kit (not appkit) to Ember.cli

I have a node.js backend server and an ember front-end project which is together: public\js -> contains all the ember app stuff app\ -> contains the node.js files server.js -> main express server code I would like to migrate to use ember-cli. I've tried the migrator and running ember init but both do not really work and give me errors. Most the documentation talks about migrating from EmberAppKit which I didn't use, but use my own grunt script to complie the templates and uglify and

Ember.js Conditionally starting and ending a div using each helper

I am using bootstrap and need to conditionally start a <div class="row"> depending on the index of the item; in this case, each row has two items. {{#each items as |item index|}} {{#if item.isStartRow}} <div class="row"> {{/if}} ...my code here {{#if item.isEndRow}} </div> {{/if}} {{/each}} The trouble is that the HTMLBars validates the div has a starting and ending tag, therefore the above will not work. Can anyone suggest a workaround? The end res

Ember.js Ember configuration issue

I'm trying to configure simple-auth-oauth2 for Ember app. As documentation says http://ember-simple-auth.com/ember-simple-auth-oauth2-api-docs.html Ember Simple Auth OAuth2's configuration object. To change any of these values, set them on the application's environment object: ENV['simple-auth-oauth2'] = { serverTokenEndpoint: '/some/custom/endpoint' } Here is my config //config/environment.js module.exports = function (environment) { var ENV = { modulePrefix:

Ember.js Ember normalize response

I'm extending the JSONSerializer in order to fit my server response which looks like this: { "result": { "items": [ { "id": "...", "title": "...", ... }, ... ], "total": number, "...": "..." } } therefore I have overridden normalizeResponse() method: normalizeResponse: function(store, primaryModelClass, payload, id, requestType) { payload = payload.result.items; return this._super(store, primaryModelClass

Ember.js Remove application's container in ember

I see that the whole ember app is rendered wrapped inside a div like: <div id="ember342" class="ember-view">...</div> is it possible to render outside it? (I'd like to keep all the content inside <header> <main> <footer> tags)

Ember.js Converting REST data to components

My specific situation for this question involves transforming inbound links into LinkComponents that use actions to scroll, but it's perhaps better to generalize it: what's the proper method to convert inbound REST data into an ember component? An example: say I have the string <a href="#foo">Foo anchor link</a> coming in from data source of choice. I have written a custom adapter and serializer to properly transform the inbound data to jsonapi standards, and I've defined a model t

Ember.js Handlebars bind a dynamic object property

When using Ember and Handlebars, is it possible to bind (two-way) a dynamically determined property of an object. {{input value=field[field_name_var]}} instead of the statically determined style {{input value=field.field_name}} I have tried: {{input value=(get field field_name_var)}} but that only results in a one way binding.

Ember.js EmberJS, Helpers and ComputedProperty

I have a Helper that receives an array of elements and returns some other array based on the first one. {{#each (sorted-strings myStrings) as |string|}} {{string}} {{/each}} The implementation of the Helper can be something like: // app/helpers/sorted-strings.js import Ember from 'ember'; export function sortedStrings(params/*, hash*/) { return params[0].sort(); } export default Ember.Helper.helper(sortedStrings); The Helper works ok, but if the original myString Array changes the ch

Ember.js Using test support code from an ember addon

I have several ember apps which use a common shared ember-cli addon. This addon has common code like models, navigation etc. I also want this addon to provide common test support code like test helpers, factories to the ember apps. However if I remove tests from .npmignore in the addon, then the test resources gets built with the ember app. Is there a way to use the addon in an ember app, but strip the addon's tests folder on build? Or perhaps there is a better way of achieving this?

Ember.js Ember power select: type at least n characters before search = wrong message

I am using ember-power-select with a custom search action for asynchronous search. I use the searchMessage, loadingMessage and noMatchesMessage attributes (beacuse i18n). I can test the input length in the search action, and it will correctly wait for the minimum length before doing the asynchronous search, but when I have 1 < input < minimumLength, the options show the noMatchesMessage instead of still showing the searchMessage. Any way to fix that?

Ember.js Parent add-on's bower dependency is not downloaded while generating child add-on's blueprint in Ember

I am using a two-level hierarchy of ember add-ons. In my parent addon's bower.json, I have included the URL in dependencies section. Also in blueprint's index.js, I have used the addBowerPackageToProject inside afterInstall hook. That bower dependency is not downloaded while generating blueprints of child addon. I have also tried invoking this._super() in the afterInstall hook of child addon's blueprints.

Ember.js Ember assets broken in nested route template

I created a nested route under an existing route. Router.map(function(){ this.route('parentRoute', function(){ this.route('childRoute'); }); }); Prior to the nesting, I had the newly nested route as a sibling to the now parent route. At the time, I was able to load assets using the normal method <img src="assets/images/profile/pic.svg" alt="" /> But after creating the nested route, putting the above in the nested route's template is giving me a 400 file not found error. Any

Ember.js ember-i18n did not find a default locale; falling back to "en"

I am getting this warning for ember-i18n (ember-i18n: 5.0.0) I have set in defaultLocale: 'en' (As mensioned in ember-i18n docs) in environment.js but still its populationg warning. //environment.js module.exports = function(environment) { var ENV = { modulePrefix: 'spotlight', environment: environment, baseURL: '/', locationType: 'auto', EmberENV: { FEATURES: {} }, APP: { defaultLocale:'en', } }

Ember.js Where is the equivalent hook of `didInsertElement` for template?

I am creating a "landing page" and there are some page logic (mainly animation and interaction) script need to be executed when the page is loaded. I have tried to put script tag inside the template hbs directly but broccoli complains the syntax issues. So I thought about the didInsertElement hook inside the component, however, there is no such hook for template. Where can I put the JavaScript code for template without converting the existing part into component?

Ember.js How do I set a property of an Ember Component from another Component?

So I created part of this app that has a modal-window component that is supposed to open when you set the property enabled to true.. application.hbs has this: {{#modal-window enabled=true title="Manage Admins"}} {{/modal-window}} In modal-window.js I have an action closeModal that does this.set('enabled',false) and likewise to open it, you set it to true. There is a nav menu on the bottom of the app which uses different components help-link, admin-link, etc. admin-link is also a component w

Ember.js attributes are not defined with babel 6

I have an Ember app with ember-computed-decorators and I have this kind of model : import DS from 'ember-data'; import {alias} from 'ember-computed-decorators'; export default DS.Model.extend({ @alias('customData.email') email }); It worked with ember-cli-babel version 5 but I updated to the version 6 with tranform-decorator-legacy and I have this error : email is not defined I reproduced it with a simple js script like this : function dec(target, name, descriptor) { const method = d

Ember.js Need guidance on how to obtaining ADAL access_token in Ember SPA via JSLL

I have and Ember SPA that uses JSLL to interactively log a user in and then make cross-domain calls to our dependent services. I'm working on a VSTS Release definition that will deploy the app then invoke a particular 'health page' that executes synthetic transactions to the dependent services and reports. What I need guidance on is the proper way to bypass the interactive login but still be able to acquire heedlessly the access_token(s) needed for the ajax calls to the dependent services. VST

Ember.js Metadata as parameter in route

I have my playload serialized: count:949 next:null previous:null results: Array(949) [0 … 99] [100 … 199] [200 … 299] [300 … 399] [400 … 499] [500 … 599] [600 … 699] [700 … 799] [800 … 899] [900 … 948] length: 949 The url parameters is limit and offset. As default it's display 20 records each, like http://localhost/data?limit=20. My router is this.store.query('model', {limit:949}); to return all data that i need, but if new records are added i have to change the limit value and this is not go

Ember.js EmberJS: Some errors not thrown in production

Recently I encountered a scenario where an error (Assertion Failed: calling set on destroyed object) was thrown while running my app in development mode, but the same error wasn't thrown in production. Why is it so? Is there a justification? If I'm missing, what other differences between production and development mode should I know?

Ember.js How to display API response in Ember template?

I'm using Ember to retrieve a specific record from a REST API and display it on a template. I can console log the payload from my serializer and it displays the object correctly, but my template can't seem to access it. The payload has the following structure: { _id: 5cb0f8bd3b74cf22b75e1a37, name: 'Mu', hour: 0, day: 0, week: 0, month: 0, year: 753, size: 1, detail: 1, createdAt: 2019-04-12T20:44:45.691Z, updatedAt: 2019-04-12T20:44:45.691Z, __v: 0 } My ember route

Ember.js How to fix 'service injection' for EmberJS integration test?

I have a tasks-table component that uses 'current-user' service. I inject the service into the component as displayed below import { inject as service } from '@ember/service'; export default Component.extend({ currentUser: service(), showBatchAction: computed('currentUser.user.directRoles.@each.title', function() { return this.get('currentUser.user.directRoles').toArray().some((role) => { return (role.id == 13) || (role.id == 15) }); }), }); The code works fine howeve

  1    2   3   4   5   6  ... 下一页 最后一页 共 54 页