CODEWITHSUNDEEP
jqueryember.js
charlie_cat
charlie_cat

Reputation: 1850

Ember.button when clicked update a Ember.TextField

I am not sure how to go about it, I want to disable the Ember.TextField and use a button to update the number in the Ember.TextField, each time it is clicked to increase a number starting from 0. The reason is that when in an iPad the up and down buttons on the Ember.TextField is way to small for a person to touch it, so rather disable the Ember.TextField so that the keyboard also does not popup and have a up button and down button instead which will each time it is touched increase or deacres a number displayed in Ember.TextField

here my code:

<?php if($_SERVER['HTTP_USER_AGENT'] == 'Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10') { ?>
    <div class="pull-right">{{view Ember.TextField class="span1 qnty-bulk" valueBinding="item.qnty" type="text" }}</div>
    <button id="increase" {{action "increase"}}>
       Up
    </button>
    <button id="decrease" {{action "decrease"}}>
       Down
    </button>                               
<?php }  ?>

item.qnty comes from here:

 {{#each item in salesopportunityitemdata.salesopportunityitems}}

then in my controller i have:

increase:function() {
  var self = this;
   $(#span1 qnty-bulk).value +=1;
},

decrease:function() {

},

I am still in the process of learning Ember as I go, did the tutorial already thanks

Upvotes: 0

Views: 167

Answers (1)

melc
melc

Reputation: 11671

You need to place your action related methods of your controller within an action object inside your controller (http://emberjs.com/guides/templates/actions/) and instead of trying to manipulate the DOM, which is not correct in terms of emberjs, try to manipulate your model, as follows

    actions: {
      increase:function() {
/*This will probably not work since you item is probably within a specific datastructure,
but the idea is to use get and set to retrieve your model's values and manipulate them. Then emberjs binding will automagically do the rest*/
        this.get('item').set('qnty',this.get('item').get('qnty')+1);
      },

      decrease:function() {

      }
    }

If you provide your ember objects/model that you use to bind the fields i can be more specific with the code, if you require it.

EDIT

This is an example of what you try to do, http://emberjs.jsbin.com/UjAgUha/1/edit

HB

<script type="text/x-handlebars" data-template-name="index">
    <div class="pull-right">{{view Ember.TextField class="span1 qnty-bulk" valueBinding="item.qnty" type="text" disabled=true}}</div>
    <button id="increase" {{action "increase"}}>
       Up
    </button>
    <button id="decrease" {{action "decrease"}}>
       Down
    </button>       
  </script>

JS

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {item:App.Item.create()};
  }
});

App.IndexController = Ember.ObjectController.extend({
  actions: {
      increase:function() {
var item = this.get('model.item');
        item.get('item');        item.set('qnty',item.get('qnty')+1);
      },
      decrease:function() {
var item = this.get('model.item');
        item.get('item');        item.set('qnty',item.get('qnty')-1);
      }
    }
});

App.Item = Ember.Object.extend({
  qnty:0
});

Upvotes: 1

Related Questions